如何在 rollup.js 构建中使用 Intl.js 作为 es2015 模块

Question

我在typescript 2 中编码的Angular 2 应用程序使用the Intl.js polyfill。

我在tsconfig.json 中设置了module:"es2015"，以允许使用Rollup.js 作为recommended by Angular 进行树摇动。在我的组件中，我只是做import 'intl'

当我在浏览器中运行应用程序时，我得到了错误

全局未定义

我尝试使用rollup-plugin-commonjs 将库转换为es2015

rollup.config.js

plugins: [
        nodeResolve({jsnext: true, module: true}),
        commonjs({
            include: 'node_modules/intl/**/*',
        })
]

当我在浏览器中运行应用程序时，出现错误：

IntlPolyfill 未定义

在线：

IntlPolyfill.__addLocaleData({locale:"en-US",...});

I noticed here 表示该库是用es6 编写的，因此它应该与rollup 兼容。关于如何将此库用作es6 模块的任何提示？

Answer 1

要将 Intl.js 用作 ES6 模块，您需要

1. 使用package.json 中的module 和jsnext:main 字段，说服维护人员将ES 模块版本与dist 文件夹中的其他文件（例如Intl.esm.js 等）一起发布——他们是已经使用 Rollup 来生成他们的 UMD 构建，所以这将是一个微不足道的添加，或者
2. 自己构建，使用 src 中的文件，注意使用相同的 Babel 配置等。

但是您可以使用 rollup-plugin-commonjs 以当前形式使用它。事实证明，您只需要确保导入的是 dist/Intl.js 文件而不是 index.js 文件（可能是由于一些棘手的循环依赖关系，它们在 CommonJS 中的工作方式与它们在 ES 模块中的工作方式不同）：

import 'intl/dist/Intl.js';
console.log(Intl); // works!

这将比导入 index.js 产生更好的结果，即使它有效，因为 dist 文件是直接从 ES 模块生成的（没有臃肿的 CommonJS 转换）。