vue制作npm插件并上传
本文目录如下
初始化项目
开发插件使用webpack-simple
即可
vue init webpack-simple ghn-npm-demo
新建项目后进入项目目录下,分别执行如下命令,初始化必需的npm包,并运行
npm install
npm run dev
开发组件
项目结构如上图所示,在src目录下新建package文件夹,新建vue文件
TestPage.vue,其中dist目录是打包后生成的
需要注意的是组件的name属性
TestPage.vue
<template>
<div class="container">
<div>{{msg}}</div>
<div>{{propData}}</div>
</div>
</template>
<script>
export default {
name: 'ghn-npm-demo',
props: ["propData"],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
<style scoped>
.container{
text-align: center;
}
</style>
暴露组件,新建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;
修改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": {
...
}
}
修改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
})
])
}
其中入口会根据开发环境,生产环境切换
-
main.js 是npm run dev 的入口,就是App.vue,用于调试/测试我们开发的组件
-
index.js是TestPage.vue,就是我们开发的组件,打包到生产环境,只是单纯的ghn-npm-demo组件
修改index.html
添加/修改index.html的js引用路径,因为修改了output 的 filename,所以引用文件的名字也得变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ghn-npm-demo</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/ghn-npm-demo.js"></script>
</body>
</html>
打包
npm run build
在dist目录下生成js和map文件,map可以删除,只使用js文件
测试使用(直接加载js)
可以在本项目内,也可以在其他项目中测试,将js文件拷出即可
示例:在本项目使用
-
main.js引入js文件
import GhnNpmDemo from "../dist/ghn-npm-demo.js" Vue.use(GhnNpmDemo);
-
App.vue使用
<template> <div id="app"> ... <ghn-npm-demo :propData="msg"></ghn-npm-demo> </div> </template> <script> export default { name: 'app', data () { return { msg: 'ghn test success' } } } </script>
发布到npm
-
1 去npm官网注册个账号 https://www.npmjs.com
-
2 在该组件根目录下的终端,运行如下命令
npm login
提示输入个人信息,如下图,输入账号密码
-
3 在该组件根目录下的终端,运行如下命令
npm publish
每次发布的时候需要修改package .json里面的version,版本必须不一样
-
4 去自己的npm上点击Packages,能看到发布的包
-
5 包的具体信息如下
npm下载使用
-
1 在其他项目下的根目录下运行命令
npm install ghn-npm-demo --save
-
2 main.js引入npm包
import GhnNpmDemo from "ghn-npm-demo" Vue.use(GhnNpmDemo);
-
3 组件使用
<ghn-npm-demo :propData="str"></ghn-npm-demo>
-
4 查看npm包
可以看到只显示了package.json中要求显示的部分,即打包后的js,其他文件均隐藏