gpt4 book ai didi

angular - 汇总 commonjs

转载 作者:太空狗 更新时间:2023-10-29 18:02:11 28 4
gpt4 key购买 nike

我正在从事 Angular2 项目。我浏览了 Angular2 aot 文档并且能够生成 ngFactory 文件。我按照文档中的建议使用了 rollup 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 模块的捆绑 请指教。

最佳答案

我目前使用的设置将供应商/应用程序文件拆分为单独的包。我还没考虑得到这个尚未使用 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.
}
};

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

从 'leaflet/leaflet' 导入 * as L;

提醒:我还没有尝试过使用 AoT 编译或生产代码,一次一个步骤。

关于angular - 汇总 commonjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40435853/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com