我正在尝试使用rollup.js创建2个单独的版本:application.js
和dependencies.js
,包含我的应用程序代码和公共库代码(react
,{{1}分别等。)
文档说我应该能够简单地使用react-dom
并使其工作 - 但是当我检查生成的包时,我仍然最终将两个库的全部包含在内。这是我的示例externals: ['react', 'react-dom']
,我使用app.config.js
调用:
我做错了什么?
rollup -c app.config.js
答案 0 :(得分:3)
我找到的答案是在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,
}
插件调用中包含一个额外的参数,如下所示:
rollup-plugin-node-resolve
显然需要这样做,以便nodeResolve({
ignoreGlobal: false,
include: ['node_modules/**'],
skip: keys(EXTERNALS), // <<-- skip: ['react', 'react-dom']
}),
插件知道rollup-plugin-node-resolve
导入这些外部依赖项时,其他skip
包含的库会导入它们。
例如:node_modules
使用import someReactLib from 'some-react-lib'
。如果没有import React from 'react'
语言,这似乎会导致将skip
拉入整个捆绑包。