vue制作npm插件并上传

vue制作npm插件并上传

初始化项目

开发插件使用webpack-simple即可

vue init webpack-simple ghn-npm-demo
1

新建项目后进入项目目录下，分别执行如下命令，初始化必需的npm包，并运行

npm install
npm run dev
1
2

开发组件

项目结构如上图所示，在src目录下新建package文件夹，新建vue文件
TestPage.vue，其中dist目录是打包后生成的
需要注意的是组件的name属性

TestPage.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

暴露组件，新建index.js

在package.json同级目录新建index.js文件，index.js是把testpage.vue文件暴露出去的出口

与main.js的区别：main.js和App.vue是用于本地开发，测试用的入口文件，也就是用于npm run dev的入口文件

index.js
TestPage.name此处使用到组件vue文件中的 name 属性

import TestPage from './src/package/TestPage.vue'
const Main = {
  install: function(Vue) {
    Vue.component(TestPage.name, TestPage)
  }
}
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) { 
	window.Vue.use(Main) 
}
export default Main;
1
2
3
4
5
6
7
8
9
10
11

修改package.json

1.name不能与已有的npm包重名，最好的办法是
2.需要修改private字段，private是true的时候不能发布到npm,需设置成false
3.增加main字段，main是打包后的文件入口
4.设置npm上传过滤，添加files属性，设置白名单，只有在files中指定的文件在publish时才会上传

{
  "name": "ghn-npm-demo",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "main": "./dist/ghn-npm-demo.js",
  "files": [
    "dist/*"
  ],
  "private": false,
  "scripts": {
    ...
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

修改webpack.config.js

重点是修改entry和output，参考如下代码

var path = require('path')
var webpack = require('webpack')

// 执行环境
const NODE_ENV = process.env.NODE_ENV;
console.log("-----NODE_ENV===",NODE_ENV);

module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'ghn-npm-demo.js',
    library: 'ghn-npm-demo', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  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]'
        }
      },
      { 
        test: /\.(svg|ttf|eot|woff|woff2)$/, 
        loader: 'url-loader', 
        options:{ 
        name:'[name].[ext]',
          limit: 9999999
        } 
      }
    ]
  },
  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' //去掉map文件
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

其中入口会根据开发环境，生产环境切换

• main.js 是npm run dev 的入口，就是App.vue，用于调试/测试我们开发的组件

• index.js是TestPage.vue，就是我们开发的组件，打包到生产环境，只是单纯的ghn-npm-demo组件

修改index.html

添加/修改index.html的js引用路径，因为修改了output 的 filename，所以引用文件的名字也得变

  
    
    
  
  
    

    
  

1
2
3
4
5
6
7
8
9
10
11

打包

npm run build
1

在dist目录下生成js和map文件，map可以删除，只使用js文件

测试使用（直接加载js）

可以在本项目内，也可以在其他项目中测试，将js文件拷出即可

示例：在本项目使用

• main.js引入js文件

  import GhnNpmDemo from "../dist/ghn-npm-demo.js"
  Vue.use(GhnNpmDemo);
  1
  2

• App.vue使用

  
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

发布到npm

• 1 去npm官网注册个账号 https://www.npmjs.com

• 2 在该组件根目录下的终端，运行如下命令

  npm login
  1

  提示输入个人信息，如下图，输入账号密码
  

• 3 在该组件根目录下的终端，运行如下命令

  npm publish
  1

  每次发布的时候需要修改package .json里面的version，版本必须不一样
  

• 4 去自己的npm上点击Packages，能看到发布的包

  

• 5 包的具体信息如下

  

npm下载使用

• 1 在其他项目下的根目录下运行命令

  npm install ghn-npm-demo --save
  1

• 2 main.js引入npm包

  import GhnNpmDemo from "ghn-npm-demo"
  Vue.use(GhnNpmDemo);
  1
  2

• 3 组件使用

  
  1

• 4 查看npm包
  可以看到只显示了package.json中要求显示的部分，即打包后的js，其他文件均隐藏