好久没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用。好久不用,发现已经忘记环境怎么搭建。翻看以前的组件,才慢慢回想起来,中间还出现些错误。在这记录下开发过程,以备忘。
一、新建工程
打成 npm 包的 vue 组件一般不会太复杂,当然如果是做一个 UI 库( 如:element-ui ),那另说。这里使用 vue-cli官方提供的 webpack-simple 模板来创建工程
vue init webpack-simple <project-name>
二、初始化工程,安装相关依赖
yarn install
三、创建组件相关目录
1、src 目录下新建 lib 文件夹,用来放置组件相关的文件。
2、在 lib 下新建 index.js 文件,用来导出组件。index.js 内容如下:
1 import Demo from './demo.vue' 2 3 const demo = { 4 install (Vue) { 5 Vue.component(Demo.name, Demo) 6 } 7 } 8 // IIFE 9 if (typeof window !== 'undefined' && window.Vue) { 10 window.Vue.use(demo) 11 } 12 export default demo
3、在 lib 下新建 demo.vue 文件,作为组件入口文件。demo.vue 内容如下:
1 <template> 2 <!-- 3 组件 html 结构 4 --> 5 </template> 6 7 <script> 8 9 export default { 10 name: "Demo", 11 props: { 12 13 }, 14 data() { 15 return { 16 17 }; 18 }, 19 mounted() { 20 21 }, 22 methods: { 23 } 24 }; 25 </script> 26 27 <style scoped> 28 29 </style>
三、修改 webpack.config.js,进行编译相关配置
1 const path = require('path') 2 const webpack = require('webpack') 3 const ENV = process.env.NODE_ENV.trim() 4 const pJson = require('./package.json') 5 6 module.exports = { 7 // 入口,区分 ENV 环境变量 8 entry: ENV==='production' ?'./src/lib/index.js':'./src/main.js', 9 // 输出 10 output: ENV==='production' ? 11 { 12 path: path.resolve(__dirname, './dist'), 13 publicPath: '/dist/', 14 filename: pJson.name + '.js', 15 library: pJson.name, 16 libraryTarget: 'umd', 17 umdNamedDefine: true 18 }:{ 19 path: path.resolve(__dirname, './dist'), 20 publicPath: '/dist/', 21 filename: 'build.js' 22 }, 23 module: { 24 rules: [ 25 { 26 test: /\.css$/, 27 use: [ 28 'vue-style-loader', 29 'css-loader' 30 ], 31 }, 32 { 33 test: /\.vue$/, 34 loader: 'vue-loader', 35 options: { 36 loaders: { 37 } 38 // other vue-loader options go here 39 } 40 }, 41 { 42 test: /\.js$/, 43 loader: 'babel-loader', 44 exclude: /node_modules/ 45 }, 46 { 47 test: /\.(png|jpg|gif|svg)$/, 48 loader: 'file-loader', 49 options: { 50 name: '[name].[ext]?[hash]' 51 } 52 } 53 ] 54 }, 55 resolve: { 56 alias: { 57 'vue$': 'vue/dist/vue.esm.js' 58 }, 59 extensions: ['*', '.js', '.vue', '.json'] 60 }, 61 devServer: { 62 historyApiFallback: true, 63 noInfo: true, 64 overlay: true 65 }, 66 performance: { 67 hints: false 68 }, 69 devtool: '#eval-source-map' 70 71 } 72 73 if (process.env.NODE_ENV === 'production') { 74 module.exports.devtool = '#source-map' 75 module.exports.plugins = (module.exports.plugins || []).concat([ 76 new webpack.DefinePlugin({ 77 'process.env': { 78 NODE_ENV: '"production"' 79 } 80 }), 81 // source-map 配置,区分 ENV 环境变量 82 new webpack.optimize.UglifyJsPlugin({ 83 sourceMap: ENV==='production' ? false : true, 84 compress: { 85 warnings: false 86 } 87 }), 88 new webpack.LoaderOptionsPlugin({ 89 minimize: true 90 }) 91 ]) 92 }
四、组件效果预览
1、修改 src/main.js 导入组件
1 import Demo from './lib/index.js' 2 Vue.use(Demo)
2、修改 src/App.vue 使用组件
1 <template> 2 <div id="app"> 3 <Demo/> 4 </div> 5 </template>
3、运行 ,浏览器预览效果
yarn run dev
五、发布
1、修改 package.json
"name": "demo", "main": "dist/demo.js", "private": false,
2、修改 .gitignore ,删除 dist 条目,如果不删除,提交时会忽略 dist 文件夹的内容,发布后 npm 安装使用时,会找不到文件,因为组件编译好的文件是放在 dist 目录下。
3、编写 README.md,介绍组件的功能
4、发布( 默认已有帐号,且已登录 )
yarn run build npm config set registry=https://registry.npmjs.org npm publish