[英]External dependencies are incorrectly bundled in rollup.js?
I am trying to create 2 separate builds using rollup.js : application.js
and dependencies.js
, contaning my application code, and common library code ( react
, react-dom
, etc.), respectively. 我想创建2个独立构建使用rollup.js :
application.js
和dependencies.js
,contaning我的应用程序代码,以及公共库代码( react
, react-dom
等),分别。
The docs say I should be able to simply use externals: ['react', 'react-dom']
and have it work - but when I inspect the resulting bundle, I still wind up having the full body of both libs included. 文档说我应该能够简单地使用
externals: ['react', 'react-dom']
并使其起作用-但是当我检查生成的包时,我仍然发现包括两个库的完整内容。 Here's my example app.config.js
, which I call using rollup -c app.config.js
: 这是我的示例
app.config.js
,我使用rollup -c app.config.js
调用:
What am I doing wrong? 我究竟做错了什么?
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import nodeResolve from 'rollup-plugin-node-resolve'
import replace from 'rollup-plugin-replace'
import uglify from 'rollup-plugin-uglify'
import { keys } from 'lodash'
const PRODUCTION = (process.env.NODE_ENV || 'development') === 'production'
const ENVIRONMENT = JSON.stringify(PRODUCTION ? 'production' : 'development')
const EXTERNALS = {
'react': 'React',
'react-dom': 'ReactDOM',
}
const plugins = [
replace({ 'process.env.NODE_ENV': ENVIRONMENT }),
babel({
babelrc: false,
exclude: ['node_modules/**', '**/*.json'],
presets: ['es2015-rollup', 'react'],
}),
commonjs({
ignoreGlobal: false,
include: ['node_modules/**'],
}),
nodeResolve({
browser: true,
jsnext: true,
main: true,
preferBuiltins: false,
}),
]
if (PRODUCTION) {
plugins.push(uglify())
}
export default {
entry: 'source/application.js',
exports: 'none',
external: keys(EXTERNALS),
globals: EXTERNALS,
plugins,
targets: [{
dest: 'build/js/application.js',
format: 'iife',
sourceMap: !PRODUCTION,
sourceMapFile: '/js/application.js',
}],
treeshake: true,
}
The answer I found was to include an additional argument to the rollup-plugin-node-resolve
plugin call, as follows: 我发现的答案是在
rollup-plugin-node-resolve
插件调用中包含一个附加参数,如下所示:
nodeResolve({
ignoreGlobal: false,
include: ['node_modules/**'],
skip: keys(EXTERNALS), // <<-- skip: ['react', 'react-dom']
}),
This is apparently needed, so that the rollup-plugin-node-resolve
plugin knows to skip
importing these external dependencies when other node_modules
included libraries import them. 显然这是必需的,因此当包含的其他
node_modules
库导入它们时, rollup-plugin-node-resolve
插件知道skip
这些外部依赖项的导入。
eg: import someReactLib from 'some-react-lib'
which uses import React from 'react'
. 例如:
import someReactLib from 'some-react-lib'
它使用import React from 'react'
。 Without the skip
language, this seems to result in pulling in React
to the overall bundle. 如果没有
skip
语言,这似乎会导致将React
整个包中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.