简体   繁体   English

外部依赖关系错误地捆绑在rollup.js中吗?

[英]External dependencies are incorrectly bundled in rollup.js?

I am trying to create 2 separate builds using rollup.js : application.js and dependencies.js , contaning my application code, and common library code ( react , react-dom , etc.), respectively. 我想创建2个独立构建使用rollup.jsapplication.jsdependencies.js ,contaning我的应用程序代码,以及公共库代码( reactreact-dom等),分别。

The docs say I should be able to simply use externals: ['react', 'react-dom'] and have it work - but when I inspect the resulting bundle, I still wind up having the full body of both libs included. 文档说我应该能够简单地使用externals: ['react', 'react-dom']并使其起作用-但是当我检查生成的包时,我仍然发现包括两个库的完整内容。 Here's my example app.config.js , which I call using rollup -c app.config.js : 这是我的示例app.config.js ,我使用rollup -c app.config.js调用:

What am I doing wrong? 我究竟做错了什么?

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

The answer I found was to include an additional argument to the rollup-plugin-node-resolve plugin call, as follows: 我发现的答案是在rollup-plugin-node-resolve插件调用中包含一个附加参数,如下所示:

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

This is apparently needed, so that the rollup-plugin-node-resolve plugin knows to skip importing these external dependencies when other node_modules included libraries import them. 显然这是必需的,因此当包含的其他node_modules库导入它们时, rollup-plugin-node-resolve插件知道skip这些外部依赖项的导入。

eg: import someReactLib from 'some-react-lib' which uses import React from 'react' . 例如: import someReactLib from 'some-react-lib'它使用import React from 'react' Without the skip language, this seems to result in pulling in React to the overall bundle. 如果没有skip语言,这似乎会导致将React整个包中。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM