编译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 捆绑器结合以下插件（按此顺序使用它们）：rollup-plugin-resolve - 需要解析 node_modulesrollup-plugin-commonjs - 需要将 node_modules 中的 CommonJS 模块转译为 ES6rollup-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"这允许您创建 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 上找到更多详细信息。