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

Question

我是 TypeScript 的新手，我正在尝试很多东西，但在编译后遇到了外部模块问题。

我从简单的 TypeScript 项目开始 Visual Studio 代码集以 ES2015 为目标，模块为 es2015（因为我想尽可能多地使用原生的东西）并且我想尝试强类型事件（STE）我使用 npm 安装的。

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

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

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

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

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

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

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

谢谢，马里奥

Answer 1

对于任何为此摸不着头脑的 TypeScript 初学者，答案是 JavaScript 捆绑器。

因为我使用的是 ES6，所以我选择了 RollupJs bundler 结合以下插件（按此顺序使用）：

rollup-plugin-resolve - 需要解析 node_modules
rollup-plugin-commonjs - 需要将 node_modules 中的 CommonJS 模块转译为 ES6
rollup-plugin-typescript2 - 可选，您可以在过程中使用它，或者您可以在运行汇总之前手动使用 tsc - 只需确保您使用版本 2（不再维护第一个版本)
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 上找到更多详细信息。

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

How to deal with external modules when compiling TypeScript?

javascript

typescript

ecmascript-6

es6-modules