angular – Rollup commonjs

发布时间：2020-12-17 17:01:04 所属栏目：安全来源：网络整理

导读：我正在开发一个Angular2项目.我通过Angular2 aot文件,我能够生成ngFactory文件.我按照文档中的建议使用了汇总js.我有一些非es6 npm包.我用过require来加载非es6包. 文档(angular2和汇总)建议使用rollup-plugin-commonjs来捆绑非es6模块.以下是我的汇总配置.

我正在开发一个Angular2项目.我通过Angular2 aot文件,我能够生成ngFactory文件.我按照文档中的建议使用了汇总js.我有一些非es6 npm包.我用过require来加载非es6包.

文档(angular2和汇总)建议使用rollup-plugin-commonjs来捆绑非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()
    ]
}

我有commonjs插件.但仍然是浏览器错误”require is undefined’.如果没有webpack / browserify的帮助,我如何能够捆绑非es6模块请注意.

解决方法

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

它确实加快了开发速度,只创建我的应用程序包进行测试(我遇到了Webpack和20s构建时间的问题).

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

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

还有一个vendor.rollup.js文件,它使用commonjs插件,如：

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

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

从’传单/传单’导入*为L;

提醒：我还没有尝试使用AoT编译或生产代码,一步一步.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!