汇总常识

Question

我正在做一个Angular2项目。我查看了Angular2的aot文档，并能够生成ngFactory文件。我按照文档中的建议使用了rollup js。我有一些非ES6的npm套餐。我已经使用要求加载非ES6包。

文档(angular2和rollup)建议使用来捆绑非ES6模块。下面是我的汇总配置。

​

export default {
    entry: 'scripts/main.js',
    dest: 'build/app.js', // output a single application bundle
    sourceMap: true,
    format: 'iife',
    context: 'this',
    plugins: [

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

        uglify()
    ]
}

​

我已经准备好了通用插件。但是浏览器的错误仍然是“需要是未定义的”。如果没有webpack/ browserify的帮助，我如何实现非ES6模块的捆绑，请告知。

Answer 1

我目前使用的设置将供应商/应用程序文件拆分为单独的包。我还没有考虑让它与AoT一起工作，这可能是一个问题，但我确实有一些使用此方法的通用模块。

它确实加快了开发速度，只创建了我的应用程序包进行测试(我对Webpack和20多岁的构建时间有问题)。

在vendor.ts文件中(我的文件与main.ts文件在同一个dir中)，我有如下内容：

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

和一个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.
    ]
})

它创建了一个供应商包。

然后在我的app.rollup.js (用于创建应用程序包的配置文件)中。

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.
    }
};

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

import * as L from 'leaflet/leaflet';

提醒:我还没有尝试过AoT编译或生产代码，一步一步。