webpack 打包Vue插件并发布npm（极简版）

插件打包

1. 新建项目并初始化

>> npm init -y

2. 项目目录如下

• src： 插件逻辑代码

• index.js： 项目入口文件

• lib：插件中使用到的其他资源和方法放在这个文件夹中

• package.json: 项目配置信息

• webpack.config.js：webpack配置

• README.md: readme 文件，插件文档

插件代码逻辑略，根据自己的插件需求编写......

3. 安装webpack、babel、babel-loader等

>> npm install webpack webpack-cli babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D 
>> npm install babel-preset-es2015  babel-preset-stage-2 -D

4. webpack配置

const path = require('path')

module.exports = {
    // mode根据环境配置，生产环境为"production"，开发环境"development"
  mode: "development",
  // 入口
  entry: {
    path: path.join(__dirname, './src/index.js')
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options: {
        // babel 转码规则
        presets: [
          "es2015",
          "stage-2"
        ] 
      }
    }]
  },
  // 打包输出
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'index.js',
  },
}

5. webpack打包

// 此处我是直接webpack打包的，可以到package.json >> scripts 中配置打包脚本
>> webpack

npm发布

1. npm 登录

>> npm login
// 根据提示输入用户名、密码、邮箱

2. 查看当前npm登录用户（可选）

>> npm whoami

3. 发布

// 在项目目录下执行
>> npm publish

常见问题

1. npm publish报错：403 Forbidden - PUT registry.npm.taobao.org/项目名称 - [no_perms] Private mode enable, only admin can publish this module

**原因：**之前设置了npm国内镜像的原因

解决方案：

// 查看当前npm仓库地址，如果不是 http://registry.npmjs.org/ ，需要重新设置npm源源
>> npm config get registry

// 重新设置npm仓库地址
>> npm config set registry=http://registry.npmjs.org

// 重新发布
>> npm publish

2. npm publish报错：404

原因: 新注册的npm账号需要邮箱验证

**解决方案：**登录邮箱验证手机号，并且terminal 中 npm账号也要退出重新登录，然后重新发布

3. 插件发布以后项目中安装后无法使用

**原因：**webpack 打包方式不支持

**解决方案：**webpack配置的output 中添加 libraryTarget: 'umd'

output: {
    path: path.join(__dirname, './dist'),
    filename: 'index.js',
    // 添加这行
    libraryTarget: 'umd',
  },

这是我第一次文档，项目难免简单了点，如果文中有任何的错误，请各位大佬指正，谢谢！