使用rollup创建简单项目

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. 先初始化一个项目

yarn init -y

2. 安装rollup

yarn add rollup -D

3. 新建一个src存放组件内容，新建一个dist作为打包后的文件夹

1. 在src中建一个components文件夹

• 新建一个button.js，导出Button

class Button {
  constructor(children) {
    this.children = children;
  }
  print() {
    console.log(this.children)
  }
}
export default Button;

• 在根目录下的index.js 使用

import Button  from './components/button'
const button = new Button('button')
button.print()

4. 在根目录下新建一个rollup.config.js

// rollup.config.js
export default {
  // 核心选项
  input: './src/index.js',     // 入口
  output: {  // 出口  (如果要输出多个，可以是一个数组)
    file: './dist/bundle.js',    //出口文件
    format: 'cjs',  // 生成包的格式
  },
};

5. 在package.json最后添加scripts

"scripts": {
    "dev": "rollup -c -w",// -c 是使用配置文件，-w是监听变化
    "build": "rollup -c"
  }

6. 不安装bablel时，运行yarn build，查看dist下的bundle.js ，仍然是es6格式，得到的是class，没有生成es5格式

7. 安装babel

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

8. 打开rollup.config.js，配置plugin

• 引入@rollup/plugin-babel

import babel from "@rollup/plugin-babel";

• 配置插件

import babel from "@rollup/plugin-babel";
// rollup.config.js
export default {
  // 核心选项
  input: './src/index.js',     // 必须
  plugins: [
    babel({
      exclude: 'node_modules/**' // 只编译我们的源代码
    })
  ],
  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file: './dist/bundle.js',    // 必须
    format: 'cjs',  // 必须 

  },
};

9. 在src下建立 .babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

10. 执行yarn build，查看dist下的bundle.js ，已经将es6转换为es5格式

11. 还有那些打包工具，rollup与它们的区别？

还有webpack,parcel等打包工具

• rollup适用于基础库的打包，如vue、react
• webpack适用于大型复杂的前端站点构建
• parcel适用于简单的实验性项目，他可以满足低门槛的快速看到效果， 由于parcel在打包过程中给出的调试信息十分有限，所以一旦打包出错难以调试，所以不建议复杂的项目使用parcel