汇总 commonjs

Posted

技术标签:

【中文标题】汇总 commonjs【英文标题】:Rollup commonjs 【发布时间】:2017-03-19 01:34:18 【问题描述】:

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

文档(angular2 和 rollup)建议使用 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 插件。但仍然浏览器错误为“需要未定义”。如果没有 webpack/browserify 的帮助,我如何实现捆绑非 es6 模块,请指教。

【问题讨论】:

【参考方案1】:

我目前使用的设置将供应商/应用程序文件拆分为单独的包。我还没有考虑得到这个 还可以使用 AoT,这可能是个问题,但我确实有使用这种方法的 commonjs 模块。

它确实加快了开发速度,只创建了我的应用程序包进行测试(我遇到了 Webpack 和 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.
    ]
)

这会创建一个供应商捆绑包。

然后在我的 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 编译或生产代码,一次一步。

【讨论】:

以上是关于汇总 commonjs的主要内容,如果未能解决你的问题,请参考以下文章

关于 CommonJS AMD CMD UMD

前端模块化CommonJS

了解JS模块规范:AMD,CMD,CommonJS

浅析JS模块规范:AMD,CMD,CommonJS

vue学习记录 coderwhy d5

浅析JS模块规范:AMD,CMD,CommonJS