配置步骤如下(会根据实际配置做一个注释来解释各个配置和依赖的作用):
yarn add -D rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-replace @rollup/plugin-image rollup-plugin-terser rollup-plugin-uglify rollup-plugin-postcss cssnano postcss-cssnext postcss-nested postcss-simple-vars
复制代码
- 安装好
rollup
后还需要配置babel
,也需要安装babel
配置需要的相关插件依赖
yarn add -D @babel/cli @babel/core @babel/plugin-external-helpers @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-react-display-name @babel/plugin-transform-react-jsx @babel/plugin-transform-runtime @babel/preset-env
复制代码
- 安装好以上开发依赖后进行
rollup
和babel
的配置,在项目根目录下新建rollup.config.js
和.babelrc.js
两个配置文件用于rollup
和babel
执行时读取。
rollup.config.js
配置如下:
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import { terser } from 'rollup-plugin-terser';
import simplevars from 'postcss-simple-vars';
import nested from 'postcss-nested';
import postcssPresetEnv from 'postcss-preset-env';
import cssnano from 'cssnano';
const env = process.env.NODE_ENV;
export default {
input: 'src/components/index.js',
output: [{
file: `dist/dna-ui-react-umd${env === 'production' ? '.min' : ''}.js`,
format: 'umd',
name: 'geneUI',
}, {
file: `dist/dna-ui-react-es${env === 'production' ? '.min' : ''}.js`,
format: 'es'
}],
onwarn: function (warning) {
if (warning.code === 'THIS_IS_UNDEFINED') {
return;
}
},
external: ['antd', '@ant-design/icons', 'react', 'prop-types', 'gojs'],
plugins: [
image(),
postcss({
plugins: [
simplevars(),
nested(),
postcssPresetEnv(),
cssnano(),
],
extensions: [ '.css', 'less' ],
}),
resolve(),
babel({
exclude: '**/node_modules/**',
runtimeHelpers: true,
plugins: [
"@babel/plugin-external-helpers"
]
}),
commonjs({
'namedExports': {
'node_modules/react-is/index.js': ['isFragment'],
'node_modules/react/index.js': ['Fragment', 'cloneElement', 'isValidElement', 'Children', 'createContext', 'Component', 'useRef', 'useImperativeHandle', 'forwardRef', 'useState', 'useEffect', 'useMemo'],
'node_modules/react-dom/index.js': ['render', 'unmountComponentAtNode', 'findDOMNode'],
'node_modules/gojs/release/go.js': ['Diagram', 'GraphLinksModel', 'Overview', 'Spot']
}
}),
replace({
'process.env.NODE_ENV': JSON.stringify(env || 'development'),
}),
(env === 'production' && terser()),
],
}
复制代码
const { NODE_ENV, BABEL_ENV } = process.env
const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'
const loose = true
module.exports = {
presets: [['@babel/env', { loose, modules: false }]],
plugins: [
['@babel/proposal-decorators', { legacy: true }],
['@babel/proposal-object-rest-spread', { loose }],
'@babel/transform-react-jsx',
cjs && ['@babel/transform-modules-commonjs', { loose }],
[
'@babel/transform-runtime',
{
useESModules: !cjs,
version: require('./package.json').dependencies[
'@babel/runtime'
].replace(/^[^0-9]*/, '')
}
],
["@babel/plugin-proposal-class-properties"]
].filter(Boolean)
}
复制代码
- 以上安装好
rollup
和babel
依赖,配置好相应配置之后可以配置执行命令在package.json
中:
"rollup-build": "cross-env BABEL_ENV=rollup rollup -c",
"rollup-production-build": "cross-env NODE_ENV=production rollup -c",
复制代码
rollup -c
指的默认执行根目录下的rollup.config.js
- 执行以上命令
yarn rollup-build
和yarn rollup-production-build
后如rollup.config.js
的output
配置在dist
目录下生成对应的打包文件。生成的文件可以用于对应的环境直接引入使用该组件库。