基于 `rollup` 搭建 vue 的组件

基于 rollup 搭建 vue 的组件

简单的说，因为对很多类型的静态资源处理没有 webpack 强大，但是基于 Tree-shaking 原理用来打包 lib的话，打出来的包，干净，小。所以 rollup 比较适合打包小型的 lib 库，不适合用来做开发。

1. 项目传送门

主要流程和包

2. 初始化项目

npm init -y
npm i -D rollup

3. 添加配置文件

// rollup.config.js
export default {
   
  input: 'src/main.js',
  output: {
   
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: []
};

2. 添加环境变量

1. 安装依赖

npm i -D rollup-plugin-replace cross-env

2. 添加 package.json > script 命令：

• -c: 读取配置文件’;
• -w: 监听文件变化；

"scripts": {
   
  "start": "cross-env NODE_ENV=development rollup -c -w",
  "build": "cross-env NODE_ENV=production rollup -c",
}

3. 它在打包时替换文件中的目标字符串

import replace from 'rollup-plugin-replace';

export default {
   
  input: isPrd ? 'src/lib-main.js' : 'src/main.js',
  output: {
   
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    replace({
   
      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
    }),
  ]
};

4. 安装 babel, 用来编译代码。

1. 安装依赖

npm i -D rollup-plugin-babel @babel/core @babel/preset-env

2. 增加 .babelrc

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

3. 添加到 rollup.config.js 中：

import babel from 'rollup-plugin-babel';
export default {
   
  input: 'src/main.js',
  output: {
   
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    babel({
   
      exclude: 'node_modules/**' // 只编译我们的源代码
    }),
  ]
};

5. 添加 .vue 文件解析

1. 安装依赖

npm i -D rollup-plugin-vue vue-template-compiler @vue/compiler-sfc

2. 导入到配置文件中

import vue from 'rollup-plugin-vue';
export default {
   
  input: 'src/main.js',
  output: {
   
    file: 'dist/bundle.js',
    format