2017-01-02 102 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拉到整個捆綁包。