如何在rollup.js build

Question

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

我在module:"es2015"中设置tsconfig.json以允许使用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（{区域设置：＆＃34;的en-US＆＃34;，...}）;

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

Answer 1

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

1. 使用Intl.esm.js和module字段说服维护人员将{ES}模块版本与dist文件夹中的其他文件（例如jsnext:main等）一起发布在package.json - 他们已经在使用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转换）。