我正在寻求有关汇总配置的帮助,以构建最简单的React应用。
目前,我捆绑的js文件实际上并没有捆绑任何依赖关系,并且看上去很裸露。
我的汇总配置:
import babel from 'rollup-plugin-babel';
import filesize from 'rollup-plugin-filesize';
import nodeResolve from 'rollup-plugin-node-resolve';
import progress from 'rollup-plugin-progress';
import visualizer from 'rollup-plugin-visualizer';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
export default {
input: 'src/index.js',
output: [
{
file: 'dist/index.js',
format: 'umd',
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'styletron-react-core': 'StyletronReactCore',
},
sourcemap: 'inline',
},
],
external: ['react', 'react-dom', 'styletron-react-core'],
plugins: [
progress(),
nodeResolve({
browser: true,
}),
json(),
babel({
babelrc: false,
presets: [['es2015', { modules: false }], 'stage-1', 'react'],
plugins: ['external-helpers'],
}),
visualizer(),
filesize(),
commonjs({
include: 'node_modules/**',
}),
],
};
答案 0 :(得分:12)
万一有人碰到这个: 这是我的工作汇总配置。
我也更新了demo repo。
import babel from 'rollup-plugin-babel';
import filesize from 'rollup-plugin-filesize';
import nodeResolve from 'rollup-plugin-node-resolve';
import progress from 'rollup-plugin-progress';
import visualizer from 'rollup-plugin-visualizer';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
export default {
input: 'src/index.js',
output: [
{
file: 'dist/index.js',
format: 'umd',
sourcemap: 'inline',
},
],
plugins: [
progress(),
nodeResolve({
browser: true,
}),
json(),
commonjs({
include: [
'node_modules/**',
],
exclude: [
'node_modules/process-es6/**',
],
namedExports: {
'node_modules/react/index.js': ['Children', 'Component', 'PropTypes', 'createElement'],
'node_modules/react-dom/index.js': ['render'],
},
}),
babel({
babelrc: false,
presets: [['es2015', { modules: false }], 'stage-1', 'react'],
plugins: ['external-helpers'],
}),
visualizer(),
filesize(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
],
};
我最初的问题是假设React依赖关系是外部的。这对于组件库是正确的,但对于独立应用程序则不正确。我还必须解决一些小问题,并命名导入映射。
希望这可以节省一些时间。
答案 1 :(得分:3)
以下是使用受支持的 rollup
插件的更新版本,适用于偶然发现此问题且需要 TypeScript 支持的新人:
// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
export default {
input: 'src/index.ts',
output: [
{
file: 'dist/index.js',
name: 'app',
sourcemap: 'inline',
format: 'iife',
},
],
plugins: [
peerDepsExternal(),
resolve({
browser: true,
dedupe: ['react', 'react-dom'],
}),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
commonjs(),
typescript({
tsconfig: 'tsconfig.json',
sourceMap: true,
inlineSources: true,
}),
css({ output: 'dist/style.css' }),
],
};
});
这将在 index.js
文件夹中输出 style.css
和 dist
如果不使用 TypeScript,只需从示例中删除 typescript 导入和插件