vue 组件发布记录

好久没做独立的 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