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 内容如下：

 import Demo from './demo.vue'
 
 const demo = {
   install (Vue) {
     Vue.component(Demo.name, Demo)
   }
 }
 // IIFE
 if (typeof window !== 'undefined' && window.Vue) {
     window.Vue.use(demo)
 }
 export default demo

3、在 lib 下新建 demo.vue 文件，作为组件入口文件。demo.vue  内容如下：

 <template>
   <!--
     组件 html 结构
     -->
 </template>
 
 <script>
 
 export default {
   name: "Demo",
   props: {
 
   },
   data() {
     return {
 
     };
   },
   mounted() {
 
   },
   methods: {
   }
 };
 </script>
 
 <style scoped>
 
 </style>

三、修改 webpack.config.js，进行编译相关配置

 const path = require('path')
 const webpack = require('webpack')
 const ENV = process.env.NODE_ENV.trim()
 const pJson = require('./package.json')
 
 module.exports = {
   // 入口，区分 ENV 环境变量
   entry: ENV==='production' ?'./src/lib/index.js':'./src/main.js',
   // 输出
   output: ENV==='production' ?
     {
       path: path.resolve(__dirname, './dist'),
       publicPath: '/dist/',
       filename: pJson.name + '.js',
       library: pJson.name,
       libraryTarget: 'umd',
       umdNamedDefine: true
     }:{
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
     filename: 'build.js'
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
             'vue-style-loader',
             'css-loader'
         ],
       },
      {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
           loaders: {
           }
           // other vue-loader options go here
         }
       },
       {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: 'file-loader',
         options: {
           name: '[name].[ext]?[hash]'
         }
       }
     ]
   },
   resolve: {
     alias: {
           'vue$': 'vue/dist/vue.esm.js'
     },
     extensions: ['*', '.js', '.vue', '.json']
   },
   devServer: {
     historyApiFallback: true,
     noInfo: true,
     overlay: true
   },
   performance: {
     hints: false
   },
   devtool: '#eval-source-map'
 
 }
 
 if (process.env.NODE_ENV === 'production') {
     module.exports.devtool = '#source-map'
     module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({
       'process.env': {
          NODE_ENV: '"production"'
       }
     }),
     // source-map 配置，区分 ENV 环境变量
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: ENV==='production' ? false : true,
       compress: {
         warnings: false
       }
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
     })
   ])
 }

四、组件效果预览

1、修改 src/main.js 导入组件

 import Demo from './lib/index.js'
 Vue.use(Demo)

2、修改 src/App.vue 使用组件

 <template>
   <div id="app">
     <Demo/>
   </div>
 </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