javascript - 编译TypeScript时如何处理外部模块？

Question

我对 TypeScript 非常陌生，我正在尝试很多东西，但在编译后却陷入了外部模块的困境。

我从 Visual Studio Code 中的简单 TypeScript 项目开始，设置为目标 ES2015 并将模块设置为 es2015(因为我想尽可能多地使用 native 内容)，并且我想尝试使用 npm 安装的强类型事件 (STE) 。

通过将模块解析更改为node并在tsconfig.json中设置baseUrl，TypeScript在使用非相对导入的STE时没有问题:

import { SimpleEventDispatcher } from "ste-simple-events";

但是，当我编译 TypeScript 时，生成的 JavaScript 文件具有完全相同的导入语句，并且在加载包含此模块的 html 时，我收到一条错误，指出无法找到模块。

我不知道如何解决这个问题。TypeScript 是否应该以某种方式将 import 语句更改为 STE 的确切位置？也许吧，但 TypeScript 团队表示 TypeScript 编译永远不会更改 import 语句中的代码。

或者我应该以某种方式编译外部模块，以便它们包含在输出中？

或者应该在浏览器中实现的 ES2015 标准中的默认模块解析来完成这项工作 - 我不知道它是如何工作的以及如何在 JavaScript 中导入外部 ES2015 模块？

任何帮助或插入正确的方向将不胜感激。

谢谢，马里奥

Answer 1

对于任何对此感到困惑的 TypeScript 初学者，答案就是 JavaScript bundler 。

由于我使用的是 ES6，因此我选择了 RollupJs bundler 并结合以下插件(按此顺序使用它们):

1. rollup-plugin-resolve - 需要解析node_modules
2. rollup-plugin-commonjs - 需要将node_modules中的CommonJS模块转译为ES6
3. rollup-plugin-typescript2 - 可选，您可以在流程中使用它，也可以在运行 rollup 之前手动使用 tsc - 只需确保使用版本 2(不再维护第一个版本)
4. rollup-plugin-terser - 压缩器和混淆器

您可以使用 npm 安装所有这些: npm install rollup rollup-plugin-resolve rollup-plugin-commonjs rollup-plugin-typescript2 rollup-plugin-terser

添加rollup.config.js对于你的项目的根目录，我的项目看起来像这样:

    import typescript from "rollup-plugin-typescript2"
    import commonjs from "rollup-plugin-commonjs";
    import resolve from "rollup-plugin-node-resolve";
    import { terser } from "rollup-plugin-terser";
    import pkg from "./package.json"

    export default {
        input: "./wwwroot/js/svgts.js",
        output: [
            {
                file: pkg.module,
                format: "esm",
            },
        ],
        external: [
            ...Object.keys(pkg.dependencies || {}),
            ...Object.keys(pkg.peerDependencies || {}),
        ], plugins: [
            resolve({
                mainFields: ["module"], // Default: ["module", "main"]
            }),

            commonjs({
                include: "node_modules/**"
            }),

            typescript({
                typescript: require("typescript"),
                tsconfig: "./tsconfig.json"
            }),

            (process.env.NODE_ENV === "production" && terser({
                mangle: { reserved: ['svg'] }
            }))
        ],
    }

Rollup 支持环境变量，我在这里使用以下行: process.env.NODE_ENV === "production"

这允许您在 package.json 中创建 npm 脚本轻松包含或不包含缩小，例如:

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "rollup": "rollup -c",
    "rollupw": "rollup -cw",
    "start": "concurrently \"npm run rollupw\" \"npm run lite\"",
    "startprod": "NODE_ENV=production concurrently \"npm run rollupw\" \"npm run lite\"",
    "production": "NODE_ENV=production npm run rollup"
  },

然后就可以在终端运行 npm run production例如构建缩小包。

您可以在每个项目的 GitHub 上找到更多详细信息。