提示：vue写一个npm包(package)

---

前言

之前一直都是用别人封装好的npm包，新接了一个需求，自己写一个npm包，可以在不同项目中引用，总结一下过程。

一、npm

npm（node package manager），通常称为node包管理器。

二、npm package开发

1、新建一个test-npm-package-self项目

vue init webpack-simple test-npm-package-self

生成项目目录结构

2、安装node_modules，启动

npm install
npm run dev

预览地址：http://localhost:8080

3、配置package.json

{
  "name": "test-npm-package-self",
  "main":"./dist/test-npm-package-self.js",   //入口文件地址   不写会一直报无法找到 ‘./src/App’的错误
  "description": "A Vue.js project",
  "version": "1.0.1",
  "author": "Long long ago",
  "license": "MIT",
  "private": false,   //private修改为false,不然无法npm publish
  "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"
  },
 "files": [           //files 生成package需要打包那些文件
  "dist",
  "index.js"
 ]
}

4、新建index.js

import App from './src/App'
import _Vue from 'vue'

App.install = Vue => {
	if (!Vue) { window.Vue = Vue = _Vue }
	Vue.component(App.name, App)
}
export default App;

5、修改webpack.config.js

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  entry: NODE_ENV == 'development'?'./src/main.js':'./index.js', //入口文件,判断开发或生产环境
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'test-npm-package-self.js', //生成文件名
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },
      {
        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 = [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    })
  ]
}

5、对应修改index.html引用js名称

6、src下App.vue

<template>
  <div id="app" class="long_app">
    <div class="long_title"><span>Title:</span>{{msg}}</div>
    <div class="long_input">
      <input type="text"  placeholder="输入文字，改变Tittle" @input="changeMsg">
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'test-npm-package-self 成功引用'
    }
  },
  created(){
    let obj= {a:'a',b:'b'};
    let obj1 = {...obj,c:'c'}
    console.log(obj1,'????')
  },
  methods:{
    changeMsg(e){ this.msg = e.target.value }
  }
}
</script>

<style>
html,body{
  height: 60%;
  position: relative;
  
}
.long_app{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.long_title{
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  
}
.long_title span{
    font-size:18px;
    color: #da2e03;
}
.long_input{
  text-align: center;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
}
.long_input input{
  outline: 0;
}
</style>

7、npm 切换源地址

npm config set registry https://registry.npmjs.org/
npm login
username: 用户名,
password: 你的登录密码
Email: 你的邮箱

登录成功后进行publish
7、publish项目

npm run build 
npm publish

8、登录npm 进入packages

找到是否有对应发布的包

到这里生成发布就已经完成，下面验证下是否可以引用，并且打包的package有没有问题

三、引用package

1、 安装刚才发布的包test-npm-package-self

npm install test-npm-package-self
npm run dev

2.引用----新建l了一个测试vue项目

<template>
  <div id="app">
      <h1>这里是test-Vue项目--引用test-npm-package-self包</h1>  
    <testNpmPackageSelf />
  </div>
</template>

<script>
import testNpmPackageSelf from "test-npm-package-self";
console.log(testNpmPackageSelf)
export default {
  name: 'App',
  components:{testNpmPackageSelf},
  methods:{
    getSourceData(data){
      console.log(data);
    }
  }
}
</script>

最终效果出来了

踩坑：
403 Forbidden - PUT https://registry.npmjs.org/test-npm-package - You do not have permission to publish “test-npm-package”. Are you logged in as the correct user?

大概问题：1、未登录。2、包名重复。3、版本重复
查了一下 test-npm-package包已存在 所以改成test-npm-package-self

源码：https://gitee.com/Longlongago0/learn.git

总结

踩坑路漫漫长@~@