引言
为了代码的高效性,写一个npm插件发布流程,内容很详细,请认真查看。
准备
需要你在npm官网(https://www.npmjs.com/)上注册一个账号,具体可进行百度,并记住你的账号和密码,作为后续使用。
1.创建项目
- 使用下面命令创建项目,步骤和创建vue项目一样
vue init webpack-simple 你的项目名
- 使用下面的命令,让项目正常跑起来
cd 你的项目名
npm install
npm run dev
2.开发插件
- 在src目录下创建一个文件夹,比如tablePages,在目录下创建index.js和table-create.vue文件。
- 修改index.js里文件内容
import tableCreate from './table-create.vue';
import Vue from 'vue'
tableCreate.install = Vue => {
if (!Vue) {
window.Vue = Vue
}
Vue.component(tableCreate.name, tableCreate);//注册组件
}
export default tableCreate;
- 在App的vue文件中,引入这个插件,方便自己调试插件使用。后续是不会影响后面的打包与发布
<template>
<div id="app">
<h2>calculate</h2>
<sum-function :num1="num1" :num2="num2" v-on:getSumFromChild="receiveChildSum"></sum-function>
<p>从子组件获取到的值:{{sumFromChild}}</p>
</div>
</template>
<script>
import sumFunction from '../src/tablePages/table-create'; // 引入
export default {
name: 'app',
data () {
return {
num1: 4,
num2: 5,
sumFromChild:0,
}
},
components:{ //注册插件
sumFunction
},
methods:{
receiveChildSum(sum){ //自定义事件,接收子组件的和
this.sumFromChild = sum;
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- 将package.json 中private改为false,不然无法发布,同时增加main属性,表明程序的入口
{
"name": "table-create",
"description": "A Vue.js project",
"version": "1.1.8",
"author": "wangpengfei_1993",
"license": "MIT",
"private": false,
"main": "./dist/table-create.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
- 修改 webpack.config.js,注意entry引用路径,如果是生产环境,则 ‘./src/tablePages/index.js’
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' : './src/tablePages/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'table-create.js',
library: 'tableCreate', // 指定的就是你使用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]'
}
}
]
},
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'
// 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: false,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
- 最后修改index.html,配置引入编辑的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table-create</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/table-create.js"></script>
</body>
</html>
发布
1.npm run build
2.npm publish
- 发布完成后就可以在自己的packages下查看了。
验证
新建一个vue项目,直接npm install 你发布的插件名 --save,
然后在页面中引入即可验证。