Typescript Systemjs捆绑包全局导入配置

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

我尝试做的基本要求是：

• 通过使用@types软件包启用typescript代码完成（也适用于全局npm安装）
• 使用ES6模块导入语法（例如，

  import*as uuu来自'lodash'

  ）
• 让构建器从构建中排除globals，并在dev/production中使用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导入，我会不断收到诸如“\u0.clone不是函数”等错误

{default:}/\uu是实际的lodash导出

我成功地将导入从“lodash”更改为

import
但由于lodash（或任何其他全局脚本，如angular）没有导出默认值，因此我会出现IDE错误，并且我会丢失代码完成

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

作为补充说明，如果效果更好的话，我可以使用脚本标记加载而不是systemjs CDN导入。
TypeScript有一个标志
——allowSyntheticDefaultImports
。具体来说，它会通知typechecker另一个transpiler、loader或bundler在后面的步骤中提供映射
模块。导出
到
导出。默认

您可以在tsconfig.json的编译器选项下指定此标志

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

请注意，当模块格式设置为“系统”

时，此标志被隐式设置

现在你可以写作了

import _ from "lodash";

TypeScript将理解它，检查它，并验证它是否正确使用。但是，这只会影响类型检查。您仍然需要（在本例中已经有）提供运行时合成的加载程序或中间传输程序

import * as _ from "lodash";

---

违反了提议的NodeJS->ESM互操作提议，如果您按照

([1,2]）.map（x=>x**2）

中的方式调用它，也违反了ES规范，该规范禁止调用模块命名空间对象。，因此，您很好地利用了

--allowSyntheticDefaultImports

标志和SystemJS提供的互操作。

面向未来的观众：最终起作用的是Aluan的回答和将TypeScripts编译模块格式设置为“System”

“module”：“System”，

。如果我只在全局上切换DefaultImports，那么是正确的，但是“default”键未定义。@RyanQ不应该是这种情况，我认为您在SystemJS中缺少包配置。使用

“模块”：“系统”

是一个不错的选择，建议使用，但不是必需的。回想一下，

--allowSyntheticDefaultImports

只影响类型检查。如果SystemJS没有自动提供默认配置，那么几乎可以肯定会缺少一些配置，但是如果没有看到您当前拥有的配置，很难说是什么。您在配置部分是正确的。当我最终找到解决方案时，我会在这里发帖，但目前我还没有找到一个好的配置来在开发/生产环境中工作。allowSyntheticDefaultImports至少在IDE方面有所帮助。