通过gulp+rollup从零到一搭建前端组件库

核心要点

• 通过 webpack 搭建运行环境
• 通过 gulp 执行编译流程
• 通过 rollup 编译组件代码
• 编写 组件
• 测试 组件
• 打包 编译组件
• 上传 npm

1、通过 webpack 搭建运行环境

这里主要是创建一个可以运行的测试的组件的环境，全局安装vue-cli脚手架，并初始化项目

vue create mtt-component

修改文件夹名称和基本配置的修改

2、通过 gulp 执行编译流程

安装gulp执行流程中所需要用到的插件

npm install -D  gulp@4.0.2 fs-extra@11.1.0 cross-spawn@7.0.3 sass gulp-sass gulp-postcss autoprefixer@9.8.6

在根目录的build文件底下创建一个gulpfile.js的文件

//gulpfile.js
const gulp = require('gulp');//执行流程
const fs = require('fs-extra');//该插件主要用于操作文件
const spawn = require('cross-spawn');//该插件主要用于运行终端命名
const sass = require('gulp-sass')(require('sass'));//该插件用于将sass编译成css
const postcss = require('gulp-postcss');//该插件处理css
const autoprefixer = require('autoprefixer');//该插件为css自动加前缀
const {
   pathDist, pathPackagesStyles} = require('./path.config.js');//公共路径配置

//清空组件文件
gulp.task('cleanComponents', done => {
   
  fs.removeSync(`${
    pathDist}/cjs`);
  fs.removeSync(`${
    pathDist}/es`);
  fs.removeSync(`${
    pathDist}/umd`);
  fs.removeSync(`${
    pathDist}/styles`);
  done();
});

//打包编译css
gulp.task('buildStyles', done => {
   
  gulp.src(