gulp 打包react组件

176 阅读1分钟

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'
// 将CommonJS模块转换为ES6的Rollup插件
import commonjs from '@rollup/plugin-commonjs';
// 用于Rollup和Babel之间无缝集成的Rollup插件
import { babel } from '@rollup/plugin-babel';
// 插件来最小化生成的es捆绑包。在引擎盖下使用terse
import { terser } from 'rollup-plugin-terser';
// Rollup和PostCSS之间的无缝集成
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(),
   
  ]
}