javascript - Les dépendances externes sont incorrectement incluses dans rollup.js ?
J'essaie de créer deux constructions séparées en utilisant rollup.js : application.js et dependencies.js, contenant respectivement mon code d'application et le code des bibliothèques communes (react, react-dom, etc.).
La documentation dit que je devrais pouvoir simplement utiliser externals: ['react', 'react-dom'] et que cela fonctionnerait - mais quand j'inspecte le bundle résultant, je me retrouve toujours avec le corps complet des deux bibliothèques inclus. Voici mon exemple de app.config.js, que j'appelle en utilisant rollup -c app.config.js :
Qu'est-ce que je fais de mal ?
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,
}
Réponse n°1
La réponse que j'ai trouvée consistait à inclure un argument supplémentaire à l'appel du plugin rollup-plugin-node-resolve, comme suit :
nodeResolve({
ignoreGlobal: false,
include: ['node_modules/**'],
skip: keys(EXTERNALS), // <<-- skip: ['react', 'react-dom']
}),
Cela est apparemment nécessaire, afin que le plugin rollup-plugin-node-resolve sache ignorer l'importation de ces dépendances externes lorsque d'autres bibliothèques incluses dans node_modules les importent.
par exemple : import someReactLib from 'some-react-lib' qui utilise import React from 'react'. Sans le langage skip, cela semble entraîner l'inclusion de React dans le bundle global.
