2017-01-02 8 views
1

rollup.jsapplication.jsdependencies.jsを使用して、私のアプリケーションコードと共通ライブラリコード(reactreact-domなど)を使用して2つの別々のビルドを作成しようとしています。外部依存関係がrollup.jsに正しくバンドルされていませんか?

ドキュメントでは、単にexternals: ['react', 'react-dom']を使用して動作させる必要があると言いますが、結果のバンドルを調べると、両方のlibsのフルボディが含まれています。ここに私の例であるapp.config.jsがあります。これはrollup -c app.config.jsを使っています:

私は間違っていますか?私が見つけた答えは次のように、rollup-plugin-node-resolveプラグインコールに追加の引数を含めるようにした

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

ウェブパックを使用してみてください。 –

答えて

1

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が全体のバンドルに含まれているように見えます。

関連する問題