Question

我使用的是Typescript，ES6模块语法和SystemJS / builder。

我尝试做的基本要求是：

使用@types包启用打字稿代码完成（对于全局npm安装）
使用ES6模块导入语法（例如import * as _ from 'lodash'）
让构建器从构建中排除全局变量，并使用dev / production中的CDN URL正确导入它们。

用于构建和dev / production env的配置只是为了让它起作用：

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插件将所有内容捆绑到一个文件中。该脚本直接在生产页面上加载并加载。问题是一旦全局依赖导入我不断得到像＆＃34; _这样的错误。克隆不是一个函数＆＃34;由于systemjs使用像

这样的对象包装CDN导入，因此等等

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

我已成功将导入更改为import _ from 'lodash' 但是后来我得到IDE错误，因为lodash（也没有像angular这样的任何其他全局脚本）不会导出默认值而我会丢失代码完成。

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

作为旁注，如果效果更好，我可以使用脚本标记加载而不是systemjs CDN导入。

Answer 1

TypeScript只有这个场景的标志--allowSyntheticDefaultImports。具体来说，它通知typechecker另一个转发器，加载器或捆绑器在后面的步骤中向module.exports提供映射。{/ p>

您可以在 tsconfig.json

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

exports.default

请注意，当模块格式设置为{ "compilerOptions": { "target": "esnext", "module": "es2015", "allowSyntheticDefaultImports": true, "moduleResolution": "node", "baseUrl": "." }时，将隐式设置此标志。

现在你可以写

了

"system"

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

import _ from "lodash";

违反了提议的NodeJS - ＆gt; ESM互操作提议，如果你在import * as _ from "lodash";中调用它也违反了禁止模块命名空间对象被调用的ES规范。所以你很好地利用了_([1, 2]).map(x => x ** 2)标志和由SystemJS提供的互操作。

Systemjs捆绑全局导入配置

1 个答案: