用vue封装插件并发布到npm的方法步骤(2)

• “var” - 以一个变量形式输出： var Library = xxx (default)；
• “this” - 以 this 的一个属性输出： this[“Library”] = xxx；
• “commonjs” - 以 exports 的一个属性输出：exports[“Library”] = xxx；
• “commonjs2” - 以 module.exports 形式输出：module.exports = xxx；
• “amd” - 以 AMD 格式输出；
• “umd” - 同时以 AMD、CommonJS2 和全局属性形式输出。

以下是 webpack.prod.conf.js 中 output 设置的示例：

 output: {
 path: path.resolve(__dirname, '../dist'),
 publicPath: '',
 filename: 'vue-flag-list.min.js',
 library: 'VueFlagList',
 libraryTarget: 'umd',
 umdNamedDefine: true
 },

Vue 是组件库的外部依赖。组件库的使用者会自行导入 Vue，打包的时候，不应该将 Vue 打包进组件库。但是，如果你将打包后的组件库以 <script> 标签形式直接引入，你会发现并不能正常执行，提示 vue 未定义。

以 <script> 标签形式使用组件时，会同样使用 <script> 标签导入 Vue。Vue 导入的变量是 “window.Vue” 而不是 “window.vue”，因此会出现 vue 未定义的错误。

所以，我们需要在 webpack.prod.conf.js 中配置 externals，如下：

externals: {
 vue: {
  root: 'Vue',
  commonjs: 'vue',
  commonjs2: 'vue',
  amd: 'vue'
 }
 },

另外，为了将css打包成一个文件，所以需要将 webpack.prod.conf.js 中的plugins 选项的

new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
 }),

修改为

new ExtractTextPlugin({
  filename: 'vue-flag-list.min.css'
 }),

修改入口文件

entry: {
 app: './src/index.js'
 },

1.5 整理一下目录结构，我的目录结构如下：

- vue-flag-list
 + build
 + dist
 - src
 + img
 index.js
 Vue-Flag-List.vue
 ...

二、用npm发布一个包

在发正式包之前可以在本地先打一个包，然后测试下有没有问题，如果没问题再发布到npm上。

2.1 打包到本地使用

npm build
npm pack

npm pack 之后，就会在当前目录下生成 vue-flag-list-1.0.0.tgz 的文件。

打开一个新的vue项目，在当前路径下执行('路径' 表示文件所在的位置)

cnpm install 路径/vue-flag-list-1.0.0.tgz

在新项目的入口文件（main.js）中引入

import VueFlagList from 'vue-flag-list'
import 'vue-flag-list/dist/vue-flag-list.min.css'

Vue.use(VueFlagList)