Angular 汇总公共JS

我正在做一个Angular2项目。我浏览了Angular2 aot文档，并能够生成ngFactory文件。我使用了文档中建议的rollup js。我有一些非es6 npm软件包。我使用require加载非es6包

文档（angular2和rollup）建议使用rollup插件commonjs捆绑非es6模块。下面是我的汇总配置

导出默认值{
条目：“scripts/main.js”，
dest:'build/app.js'，//输出单个应用程序包
sourceMap:true，
格式：“iLife”，
上下文：“this”，
插件：[
nodeResolve(
{
jsnext：是的，
模块：正确，
}
),
普通的({
包括：'node_modules/**/**'，
})  ,
丑陋的
]
}

我当前使用的设置将供应商/应用程序文件拆分为单独的捆绑包。我还没有考虑过得到这个 要使用AoT，这可能是一个问题，但我确实有使用此方法的commonjs模块

它确实加快了开发速度，只创建了要测试的应用程序包（我的网页包和20秒的构建时间有问题）

在vendor.ts文件中（我的与main.ts文件位于同一目录中），我有如下内容：

import * as _leaflet from 'leaflet/dist/leaflet'; //leaflet is installed via npm in this case.
...
export default {
    ...
    _leaflet
};

以及使用commonjs插件的vendor.rollup.js文件，如：

commonjs({
    include: [
        helpers.root('node_modules', '**') //This is just a method to make an absolute path to node_modules. See Angular 2 webpack docs for that.
    ]
})

这将创建一个供应商包

然后在my app.rollup.js（创建我的应用包的配置文件）中

最后，在我的应用程序中，我可以使用

从“传单/传单”导入*为L

提醒：我还没有尝试过AoT编译或生产代码，一步一个脚印

export default {
    entry: 'src/main.ts',
    dest: 'bundles/app.js',
    format: 'iife',
    sourceMap: true,
    moduleName: 'app',
    plugins: [
        ...
    ],
    external: [
        'leaflet/leaflet'  //Yeah, you can rename it to have nicer looking imports.
    ],
    globals: {
        ...
        'leaflet/leaflet': 'vendor._leaflet'  //And map it to the correct global var here.
    }
};