2017-01-02 38 views
1

我正在尝试使用rollup.jsapplication.jsdependencies.js(分别包含我的应用程序代码和公共库代码(reactreact-dom等))创建2个单独的版本。外部依赖关系错误地捆绑在rollup.js中?

文档说我应该能够简单地使用externals: ['react', 'react-dom']并使其工作 - 但是当我检查所得到的包时,我仍然包含两个库的完整主体。这里是我的例子app.config.js,我打电话给我使用rollup -c app.config.js

我在做什么错?

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, 
} 
+0

尝试使用webpack ..我发现它更容易 –

回答

1

我发现答案是包括一个额外的参数给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语言,这似乎会导致将React拉到整个捆绑包。