随便写写

# 如何使用 rollup 构建 js？

# 创建 package.json 文件

npm init
1

# 安装 rollup

yarn add rollup -D
1

# Babel

# 许多开发人员在他们的项目中使用Babel，以便他们可以使用未被浏览器和 Node.js 支持的将来版本的 JavaScript 特性。

yarn add @babel/core @babel/preset-env babel-preset-es2015-rollup -D
1
yarn add rollup-plugin-babel -D
1

# 添加到 Rollup 配置文件 rollup.config.js:

// rollup.config.js
import babel from "rollup-plugin-babel";

export default {
  input: "src/main.js",
  output: {
    file: "dist/index.js",
    format: "cjs",
    name: "evenbus",
    minify: true
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    })
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 现在，在我们运行 rollup 之前，我们需要安装 external-helpers 插件

yarn add babel-plugin-external-helpers -D
1

# 若使用 class 需要安装 plugin-proposal-class-properties 插件

yarn add @babel/plugin-proposal-class-properties -D
1

# 添加到 Babel 配置文件 babel.config.js:

// babel.config.js
module.exports = {
  presets: ["@babel/preset-env"],
  plugins: ["@babel/plugin-proposal-class-properties"]
};
1
2
3
4
5

# 使用 rollup-plugin-uglify 插件进行代码压缩

yarn add rollup-plugin-uglify -D
1

# 添加到 Rollup 配置文件 rollup.config.js:

// rollup.config.js
import { uglify } from "rollup-plugin-uglify";

export default {
  input: "src/main.js",
  output: {
    file: "dist/index.js",
    format: "cjs",
    name: "evenbus",
    minify: true
  },
  plugins: [
    ...,
    uglify()
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 将 package.json main指向打包后的 js：dist/index.js

← 兄 dei，是时候给你的 Webpack 做一波优化了~ →