javascript - Kebergantungan luaran dibundel dengan salah dalam rollup.js?


Saya sedang mencuba untuk membuat 2 binaan berasingan menggunakan rollup.js: application.js dan dependencies.js, yang mengandungi kod aplikasi saya, dan kod perpustakaan biasa (react, react-dom, dan sebagainya), masing-masing.

Dokumen mengatakan saya sepatutnya boleh terus menggunakan externals: ['react', 'react-dom'] dan ia akan berfungsi - tetapi apabila saya memeriksa bundle yang terhasil, saya masih berakhir dengan seluruh kandungan kedua-dua perpustakaan itu dimasukkan. Berikut ialah contoh app.config.js saya, yang saya panggil menggunakan rollup -c app.config.js:

Apa yang saya lakukan salah?

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

Jawapan #1

Jawapan yang saya temui adalah dengan memasukkan hujah tambahan ke panggilan pemalam rollup-plugin-node-resolve, seperti berikut:

nodeResolve({
  ignoreGlobal: false,
  include: ['node_modules/**'],
  skip: keys(EXTERNALS), // <<-- skip: ['react', 'react-dom']
}),

Ini nampaknya diperlukan, supaya plugin rollup-plugin-node-resolve tahu untuk melangkau import kebergantungan luaran ini apabila perpustakaan lain yang termasuk dalam node_modules mengimportnya.

cth.: import someReactLib from 'some-react-lib' yang menggunakan import React from 'react'. Tanpa bahasa skip, ini nampaknya menyebabkan React dimasukkan ke dalam keseluruhan bundle.