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