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

Question

我对 TypeScript 很陌生，我尝试了很多东西，但在编译后却被外部模块卡住了。我从 Visual Studio Code 中的简单 TypeScript 项目开始，将目标设置为 ES2015，并将模块设置为 es2015（因为我想尽可能多地使用本机内容），我想尝试使用 npm 安装的强类型事件 (STE)。通过将模块分辨率更改为node并baseUrl在 中设置tsconfig.json，TypeScript 在使用非相对导入的 STE 时没有问题：import { SimpleEventDispatcher } from "ste-simple-events";但是，当我编译 TypeScript 时，生成的 JavaScript 文件具有完全相同的导入语句，并且在加载包含此模块的 html 时，出现无法找到模块的错误。我不知道如何解决这个问题。TypeScript 应该以某种方式将 import 语句更改为 STE 的确切位置吗？也许吧，但 TypeScript 团队表示 TypeScript 编译永远不会改变 import 语句中的代码。或者我应该以某种方式编译外部模块，以便它们包含在输出中？或者应该在浏览器中实现的 ES2015 标准中的默认模块分辨率来完成这项工作 - 我不知道它是如何工作的，以及应该如何在 JavaScript 中导入外部 ES2015 模块？任何帮助或朝正确方向的推动将不胜感激。

Answer 1

对于任何对此感到头疼的 TypeScript 初学者来说，答案就是 JavaScript 打包器。

由于我使用的是 ES6，因此我选择了 RollupJs 捆绑器结合以下插件（按此顺序使用它们）：

1. rollup-plugin-resolve - 需要解析 node_modules

2. rollup-plugin-commonjs - 需要将 node_modules 中的 CommonJS 模块转译为 ES6

3. rollup-plugin-typescript2 - 可选，您可以在过程中使用它，也可以在运行汇总之前手动使用 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"

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

"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 上找到更多详细信息。