从0搭建Vue3组件库如何使用 glup 打包组件库并实现按需加载

下面是从0搭建Vue3组件库并使用glup打包组件库实现按需加载的完整攻略。

步骤一：搭建组件库的开发环境

1.1 环境依赖

首先，我们需要安装Node.js和npm。在安装完成之后，可以在命令行中输入以下命令进行确认：

node -v # 查看当前Node.js版本
npm -v # 查看当前npm版本

1.2 创建Vue3组件库

Vue3框架已经正式发布，我们可以使用Vue CLI创建组件库的模板。

npm install -g @vue/cli
vue create my-component-library --inline --no-git

其中，my-component-library是你组件库的名称，--inline是指定创建一个内联的模板，而--no-git是指定创建时不添加Git版本管理。创建完毕后，进入该目录并启动开发服务器来进行开发。

cd my-component-library
npm run serve

然后打开管理器，输入localhost:8080即可以看到Vue3应用程序已经成功启动。

1.3 安装Vite

由于Vite是一种新的开发方式，使用Vite也可以搭建Vue3组件库的开发环境。我们先通过npm全局安装Vite：

npm install -g vite

然后进入项目目录下，初始化一个Vue3组件库：

npm init vite-app my-component-library

接着安装相关依赖：

cd my-component-library
npm install

最后启动开发服务器：

npm run dev

打开管理器，输入localhost:3000即可以看到Vue3应用程序已经成功启动。

步骤二：创建组件

为了方便演示，这里我们创建一个简单的Button组件。

2.1 组件结构

首先在src/components目录下新建Button.vue文件，然后在内部写下如下的代码即可。

<template>
  <button class="btn" :class="[type ? 'btn-' + type : '', size ? 'btn-' + size : '']">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.btn {
  border-radius: 3px;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 32px;
  padding: 0 20px;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
}
.btn-primary {
  background-color: #f46d3c;
}
.btn-secondary {
  background-color: #aab8c2;
}
.btn-small {
  height: 24px;
  padding: 0 10px;
}
</style>

2.2 引入组件

接下来，在src下新建index.js，并将组件导出。

export { default as Button } from './components/Button.vue'

步骤三：打包组件库

接下来就是使用gulp将组件库进行打包，并实现按需加载的功能。

3.1 安装依赖

npm install --save-dev gulp gulp-uglify gulp-babel @babel/preset-env rollup gulp-rollup rollup-plugin-node-resolve rollup-plugin-vue

其中：

• gulp 和其它常用插件
• rollup 和它的一些常用插件。我们将使用它来打包库。
• @babel/preset-env 和 gulp-babel，用于在库中使用的所有JavaScript文件中转换ES6标准代码，以便可以在旧版浏览器上使用。
• rollup-plugin-vue，使用rollup打包Vue单个文件组件如 .vue。

3.2 配置gulpfile.js

在根目录下新建gulpfile.js文件。这里我们借助gulp，使用rollup去打包。

var gulp = require('gulp');
var vue2Rollup = require('rollup-plugin-vue');
var rollup = require('gulp-better-rollup');
var nodeResolve = require('rollup-plugin-node-resolve');
var uglify = require('gulp-uglify');
var babel = require('gulp-babel');

gulp.task('default', function() {
  return gulp.src('src/index.js')
    .pipe(rollup({
      plugins: [
        vue2Rollup({}),
        nodeResolve(),
      ]
    }, {
      format: 'umd',
      name: 'my-component-library'
    }))
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/'))
});

这里我们使用gulp默认任务，将src/app.js进行打包并输出到dist目录下。

3.3 编译库

在命令行中输入以下命令:

gulp

运行完毕后，可以在dist目录下看到编译后的代码。

步骤四：使用编译出来的组件库

4.1 安装和使用全局的组件库

首先安装组件库：

npm install --save your-component-library

然后在项目中引入：

import Vue from 'vue';
import YourComponentLibrary from 'your-component-library/dist/your-component-library.js';
import 'your-component-library/dist/your-component-library.css';

Vue.use(YourComponentLibrary);

4.2 按需加载组件

为了防止打包后的组件库体积过于庞大，我们可以使用按需加载的方式来引入组件。

import Vue from 'vue';
import { Button } from 'your-component-library/dist/your-component-library.esm.js';

Vue.component('MyButton', Button);

这样的话就只会加载Button组件了。

示例一：基于Vue CLI创建组件库

1. 创建组件

在前面提到的my-component-library项目中的components目录下新建一个HelloWorld.vue组件。

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button class="btn" @click="changeMsg">点我改变文字</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: 'Hello, Vue 3!'
    }
  },
  methods: {
    changeMsg() {
      this.$emit('update:msg', 'Hello, World!');
    }
  }
};
</script>

<style scoped>
.btn {
  display: inline-block;
  padding: 10px;
  border-radius: 3px;
  border: none;
  color: #fff;
  background-color: #42b983;
  cursor: pointer;
}
</style>

2. 导出组件

在src下新建index.js，在其中导出组件。

import HelloWorld from './components/HelloWorld.vue';

export default {
  install(Vue) {
    Vue.component('HelloWorld', HelloWorld);
  }
};

3. 使用gulp打包组件库

在gulpfile.js中配置以下代码。

const gulp = require('gulp');
const vue2Rollup = require('rollup-plugin-vue');
const rollup = require('gulp-better-rollup');
const nodeResolve = require('rollup-plugin-node-resolve');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('default', function() {
  return gulp.src('src/index.js')
    .pipe(rollup({
      plugins: [
        vue2Rollup({}),
        nodeResolve(),
      ]
    }, {
      format: 'umd',
      name: 'my-component-library'
    }))
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/'))
});

然后在终端中运行以下命令进行打包：

gulp

4. 安装及使用组件库

在组件库的根目录下，打开终端，执行以下命令：

npm pack

然后将生成的tarball文件拷贝到其他项目文件夹下，执行以下命令进行安装：

npm install your-component-library-1.0.0.tgz

安装完成后，在项目中引入：

import Vue from 'vue';
import YourComponentLibrary from 'your-component-library';
import 'your-component-library/dist/your-component-library.css';

Vue.use(YourComponentLibrary);

5. 按需加载组件

在Vue CLI创建的组件库中不支持按需加载组件。因此我们需要将其改为Vue CLI提供的构建方式来实现按需加载。

首先我们需要修改package.json的main和module字段，将它们变为：

{
  "main": "dist/your-component-library.common.js",
  "module": "dist/your-component-library.esm.js"
}

然后在组件库的的src文件夹下新增一个文件夹plugin，并在其中创建index.js，写入以下代码：

import HelloWorld from '../components/HelloWorld.vue';

const components = [
  HelloWorld
];

export default {
  install(Vue) {
    components.forEach((component) => {
      Vue.component(component.name, component);
    });
  }
};

接着修改src/components/index.js中的代码，将其变为：

export { default as HelloWorld } from './HelloWorld.vue';

在src/main.js中添加以下代码：

import YourComponentLibrary from './plugin';
import { HelloWorld } from './components';

Vue.use(YourComponentLibrary);

const components = [HelloWorld];

components.forEach((component) => {
  Vue.component(component.name, component);
});

最后在顶级App.vue文件中添加以下代码来使用组件：

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <my-hello-world :msg="msg" @update:msg="changeMsg" />
  </div>
</template>

<script>
import { HelloWorld } from 'your-component-library';

export default {
  name: 'App',
  components: {
    MyHelloWorld: HelloWorld
  },
  data() {
    return {
      msg: 'Hello, Vue 3!'
    };
  },
  methods: {
    changeMsg(newMsg) {
      this.msg = newMsg;
    }
  }
};
</script>

示例二：基于Vite创建组件库

1. 创建组件

与上述Vue CLI创建组件库的做法相同，在src/components目录下新建HelloWorld.vue文件。

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: 'Hello, Vite!'
    }
  },
  data() {
    return {};
  },
  methods: {},
  computed: {}
};
</script>

2. 导出组件

在src下新建index.js，在其中导出组件。

import HelloWorld from './components/HelloWorld.vue';

export {
  HelloWorld
};

3. 使用gulp打包组件库

在gulpfile.js中配置以下代码。

const gulp = require('gulp');
const vue2Rollup = require('rollup-plugin-vue');
const rollup = require('gulp-better-rollup');
const nodeResolve = require('rollup-plugin-node-resolve');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('default', function() {
  return gulp.src('src/index.js')
    .pipe(rollup({
      plugins: [
        vue2Rollup({}),
        nodeResolve(),
      ]
    }, {
      format: 'es',
    }))
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/'))
});

然后在终端中运行以下命令进行打包：

gulp

4. 安装及使用组件库

在组件库的根目录下执行以下命令进行安装：

npm link

然后在需要使用的项目中执行以下命令（使用link的方式将组件库link到此项目中）：

npm link your-component-library

安装完毕后，在项目中引入：

import { HelloWorld } from 'your-component-library/dist/your-component-library.esm.js';
import 'your-component-library/dist/your-component-library.css';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};

5. 按需加载组件

在Vite创建的组件库中，组件库模板默认就支持按需加载组件。我们只需要在项目中的代码中进行按需引入即可。

import { HelloWorld } from 'your-component-library';