前言：最初目的是为了工作中的一个模块需要使用到放大镜，去各处找最后发现vue-piczoom这个npm包，但是使用的过程中出现了某些情况。所以我就打算自己做一个这样的包最后发布到npm上
最开始是去github上找到vue-piczoom的源码，将原先的vue2的格式，改成了vue3的setup形式。我自己本地用的时候还是不错的
到了中途发布到npm时，我下载下拉发现一直使用不了，就发现到了package.json中main的指向没有进行于是我将main的指向到index.js，最后使用webpack打包成js文件，最后导入本地。嗯，可以用
打包成SDK的步骤如下： 1、在src下创建一个index,js文件
index.js文件中导入需要打包项目，并且导出
import PicZoom from './components/PicZoom.vue' export default PicZoom
2、创建webpack.config.js
let path = require('path') const { VueLoaderPlugin } = require('vue-loader') module.exports = { // 进行mode分环境 mode:'production', // 入口文件为index.js entry: './src/index.js', // 出口文件打包为dist，名字为自己命名 output: { path: path.resolve(__dirname, 'dist'), filename: 'vue3-piczoom.js', library: 'vue3-piczoom', libraryTarget: "umd" }, // 安装依赖一定要加载vueloaderplugin plugins:[new VueLoaderPlugin()], module: { // webpack模块化的依赖 rules: [ { test: /\.vue$/, loader: 'vue-loader' }, {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, { test: /\.png$/, use: [{ loader: 'url-loader', //使用url-loader处理打包图片 options:{ limit:10750 } }] }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, //排除作用 node_modules下不要处理 use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], //处理方式 } } } ] }, externals: { vue: 'vue' } }
3、安装依赖
npm install -D webpack-dev-server npm install -D babel-loader @babel/core @babel/preset-env npm i file-loader url-loader -D npm install less-loader less -D npm install --save-dev css-loader style-loader npm install -D vue-loader vue-template-compiler npm i webpack -s npm i webpack-cli -s
4、新建build.js
// 这里简单的 copy 了 vue-cli 提供的 build 代码 let webpackConfig = require('./webpack.config') let rm = require('rimraf') let path = require('path') let webpack = require('webpack') let util = require('util') const compileCallback = (er, stats) => { if (er) throw er stats = util.isArray(stats.stats) ? stats.stats : [stats] stats.forEach((item) => { process.stdout.write(item.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') }) console.log('Build complete.\n') } rm(path.resolve(__dirname, './dist'), err => { if (err) throw err let compiler = webpack(webpackConfig) compiler.run(compileCallback) })
5、在package.json中设置 设置版本号，删除掉私有性选项，将main文件设定为出口文件的js
"name": "vue3-piczoom", "version": "1.0.5", "main": "dist/vue3-piczoom.js", "scripts": { "dev": "webpack server", "build": "webpack build", "preview": "webpack preview", "test:e2e": "nightwatch tests/e2e", "test:unit": "nightwatch src/components/**/__tests__/*", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" } }
这就可以将项目打包成sdk啦 npm发布的步骤可以自行百度，很简单
