前端打包之Rollup.js

参考：rollup中文网

• rollup功能单一，webpack功能强大
• 工具要尽量功能单一，可集成，可扩展

1. npm init
2. npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest babel-core --save-dev
3. 配置.babelrc

{
    "presets": [
        ["latest", {
            "es2015": {
                "modules": false
            }
        }]
    ],
    "plugins":["external-helpers"]
}

4. 配置rollup.config.js

import babel from "rollup-plugin-babel"
import resolve from "rollup-plugin-node-resolve"

export default {
    entry: 'src/index.js',
    format: 'umd',  // 兼容性设置，可适用js，es6，AMD等语法
    plugins: [
        resolve(),
        babel({
            exclude: 'node_modules/**'
        })
    ],
    dest: 'build/bundle.js'
}

7. 修改package.json中的scripts

{
  "name": "learnrollup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "rollup -c rollup.config.js"
  },
  "author": "lishuaiyi",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-latest": "^6.24.1",
    "rollup": "^0.66.6",
    "rollup-plugin-babel": "^3.0.7",
    "rollup-plugin-node-resolve": "^3.4.0"
  }
}

8. 运行npm start

来源：CSDN

作者：前端小兔子

链接：https://blog.csdn.net/qq_33084055/article/details/103872109