Systemjs 捆绑全局导入配置

Question

我正在使用 Typescript、ES6 模块语法和 SystemJS / builder。

我想做的基本要求是：

• 使用 @types 包启用 typescript 代码补全（也适用于全局 npm 安装）
• 使用 ES6 模块导入语法（例如import * as _ from 'lodash'）
• 让构建器从构建中排除全局变量，并在开发/生产中使用 CDN url 正确导入它们。

我用于构建和开发/生产环境的配置只是为了启动它：

System.config({
  meta: {
    "lodash": {
      "format": "global",
      "build": false,
      "exports": "_"
    }
    // ...more meta
  }, 
  map: {
    "lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js",
     // ...more maps
  }
});

从这里我有一个 npm 任务，它转译为 ES6，然后通过 babel 插件将所有内容捆绑到一个文件中。该脚本直接加载到生产页面上并加载。问题是，一旦全局依赖项导入，由于 systemjs 使用诸如

之类的对象包装 CDN 导入，我不断收到诸如“_.clone 不是函数”之类的错误

{default: _ } //_ is the actual lodash export

我已成功将导入更改为import _ from 'lodash' 但后来我得到 IDE 错误，因为 lodash（也没有任何其他全局脚本，如 angular）没有导出默认值，并且我失去了代码完成。

在这里使用systemjs / builder满足要求的正确方法是什么？

附带说明，如果效果更好，我可以使用脚本标签加载而不是 systemjs CDN 导入。

Answer 1

TypeScript 有一个标志 --allowSyntheticDefaultImports 仅用于这种情况。具体来说，它会通知类型检查器另一个转译器、加载器或捆绑器在稍后的步骤中提供映射 module.exports 到 exports.default。

您可以在 tsconfig.json

的编译器选项下指定此标志

{
  "compilerOptions": {
    "target": "esnext",
    "module": "es2015",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "baseUrl": "."
  }

请注意，当模块格式设置为"system"时，此标志是隐式设置的。

现在你可以写了

import _ from "lodash";

TypeScript 会理解它，对它进行类型检查，并验证它是否被正确使用。但是，这只影响类型检查。您仍然需要并且在这种情况下已经拥有提供运行时综合的加载器或中间转译器。

import * as _ from "lodash";

违反了提议的 NodeJS -> ESM 互操作提议，如果您像 _([1, 2]).map(x => x ** 2) 那样调用它，也违反了禁止调用模块命名空间对象的 ES 规范。因此，您可以很好地利用 @ 987654329@标志和SystemJS提供的互操作。