1、准备node环境、安装全局gulp
- npm install gulp -g
- yarn global add gulp
2、初始化
- 可手动新增package文件
- 也可使用命令行 npm init 新增
"name": "tool",
"version": "0.0.1",
"description": "",
"main": "./src/index.js", // 打包入口文件
"scripts": {
"build": "rimraf lib/main && rollup --config"
},
"keywords": [],
"author": "",
"dependencies": {
"@babel/core": "^7.20.5",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-runtime": "^7.19.6",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^23.0.4",
"@rollup/plugin-node-resolve": "^15.0.1",
"core-js": "^3.26.1",
"dayjs": "^1.11.7",
"less": "^4.1.3",
"postcss": "^8.4.19",
"react": "17.x",
"react-dom": "17.x",
"rimraf": "^3.0.2",
"rollup": "^2.61.1",
"rollup-plugin-clear": "^2.0.7",
"rollup-plugin-postcss": "^4.0.2"
}
}
3、新建rollup.config.js
import clear from 'rollup-plugin-clear';
import { nodeResolve } from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs';
import { babel } from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import postcss from "rollup-plugin-postcss";
export default {
input: ['./src/index.js'],
output: {
name: 'tool',
file: 'lib/main/index.js',
format: 'umd'
},
external:['react'],
plugins: [
clear({
targets: ['./lib/index']
}),
nodeResolve({
jsnext: true,
main: true,
browser: true,
}),
babel({
exclude: 'node_modules/**',
extensions: ['.js', '.jsx'],
presets: ['@babel/preset-react']
}),
commonjs({
include: ["node_modules/**"],
}),
postcss(),
]
}