vue2封装组件，上传至NPM

七号程序员

已于 2024-09-04 17:07:47 修改

阅读量970

点赞数 14

文章标签： npm 前端

于 2024-09-04 15:55:14 首次发布

本文链接：https://blog.csdn.net/m0_56976301/article/details/141859834

版权

一、开始前的准备工作

1、注册NPM账号：npm | Home

2、检查环境配置：npm、node、webpack、vue

二、封装项目

1、搭建一个vue2项目，如需具体步骤可参考另一篇文章：搭建一个vue2项目_vue2安装-CSDN博客

2、修改目录结构和名称（可省略）

vue2项目搭建之初的目录结构一般为下图所示：

我们可以根据项目需要和自身习惯作出调整，我参考了其他文章完成了封装和上传，写在这里作为参考，感谢原文章及作者大大：如何封装Vue组件并上传到npm_vue2 如何将项目组件打包成npm-CSDN博客

重点调整为以下文件：

src --重命名--> examples
components 存放组件（css统一存放各个组件样式，lib存放组件及其js文件，index.js将全部组件注册为全局组件）：

lib中的js文件用来导出各自的组件：

最后在 components/index.js 将组件库中定义的所有组件引进来，进行导出：

修改完目录结构后要注意，webpack中默认将src/main.js作为入口文件，我们将scr重命名为example，入口文件路径也需要进行相应修改（没有修改文件名称可省略该步骤）：

3、封装组件

组件内容根据具体需求写入，规则和在项目中封装子组件是一样的。

4、根目录下新建webpack.components.js文件，其中主要是对组件打包的配置，直接附上代码：

const { VueLoaderPlugin } = require('vue-loader');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const glob = require('glob')
const path = require('path')
const list = {}// 动态导入多个组件的入口文件
// 封装组件的一些配置，因为组件打包是单独打包的，所以需要单独配置
async function makeList (dirPath, list) {
  // 拿到所有的入口文件的路径
  const files = await glob.sync(`${dirPath}/**/index.js`)//[ 'components/lib/button/index.js', 'components/lib/icon/index.js']
  // 取出上一级目录的文件名
  files.forEach(file => {
    let name = file.split('/')[2]
    // 判断name是否有后缀名，有的话去除
    if (name.includes('.')) {
      name = name.split('.')[0]
    }
    list[name] = `./${file}`
  })
  // console.log(list)
}
makeList('components/lib', list)
module.exports = {
  entry: list,
  mode:'development',
  output: {
    filename: '[name].umd.js',// webpack打包的时候会将name替换成入口的name名字，例如card.umd.js
    path: path.resolve(__dirname, 'dist'),
    library:'mui',
    libraryTarget: 'umd',// 指定输出格式，umd是一种模块，兼容了CommonJS、AMD、CMD
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin()
  ],
  module: {
    // 配置rules，即什么样的文件，使用什么样的loader
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },// 处理了css
      {
        test: /\.scss$/,
        use: ["style-loader","css-loader","sass-loader"]
      }, //处理scss
      {
        test: /\.(png|jpg|gif|svg)$/i, // 匹配图片文件格式
        type: 'asset/resource', // 使用内置的asset模块处理资源文件
        generator: {
          filename: 'images/[name][ext]', // 输出的文件名格式
        },
      }
    ],
  },
}

5、根目录下新建gulpfile.js，对组件中的scss文件进行处理

const gulp = require('gulp');
// 需要把样式代码导入
const sass = require('gulp-sass')(require('sass'));
// 对css代码进行压缩
const minifyCSS = require('gulp-minify-css');
gulp.task('sass', async function () {
  return gulp.src('components/css/**/*.scss')
    .pipe(sass())// 将scss代码转换成css代码
    .pipe(minifyCSS())// 压缩css代码
    .pipe(gulp.dest('dist/css'))// 输出到打包目录
})

6、根据具体上传需要完善 .gitignore 文件内容

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

7、修改打包命令