npm发布公共组件包为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只

1. 修改webpack配置

// 在module.export中加入如下代码
// 根据不同的执行环境配置不同的入口
entry: NODE_ENV === 'development' ? './src/main.js' : './src/index.js',
output: {
    path: path.resolve(__dirname, './lib'),
    publicPath: '/lib/',
    filename: 'index.js',
    library: 'mu-design', // 指定require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对UMD的构建过程中的AMD模块命名，否则使用匿名的define。
}

library：指定的就是你使用require时的模块名

libraryTarget：为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。

有时我们想开发一个库，如lodash，underscore这些工具库，这些库既可以用commonjs和amd方式使用也可以用script方式引入。

这时候我们需要借助library和libraryTarget，我们只需要用ES6来编写代码，编译成通用的UMD就交给webpack了

umdNamedDefine：会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define

2. 修改package.json文件和 index.html，添加readme.md

// 发布开源 因此需要将这个字段改为 false
"private": false,
// 这个指 import demo 的时候它会去检索的路径
"main": "./lib/index.js",

// index.html中引用地址也要做相应改变
<script src="/lib/index.js"></script>

3. npm发布包

发布新包

（1）在npm官网注册账号，地址：www.npmjs.com/ ，注册好之后：

　　注意邮箱要验证，会发送验证链接到你的注册邮箱，没有验证的话是不能发布代码的

　　看一下package.json 中 author 尽量与 npm 账户一致

（2）切换到需要发包的项目根目录下，登录npm账号，输入用户名、密码、邮箱

// 进入项目根目录，初始化npm包
npm init
// 登录
npmnpm login
// 执行发布
npm publish

更新包

// 修改包的版本，命令会在原来的版本上自动加1，
// 实际上是将package.json文件中的version值修改了
npm version patch 
// 重新发布包
npm publish

删除包

// 删除指定的版本
npm unpublish 包名@版本号
// 删除整个包，会有警告提示
npm unpublish 包名 --force

4.使用

// 安装
npm install your-npm-page --save

//main.js中引入
import demo from 'your-npm-page'
Vue.use(demo)

5.调试

通过软链接的方式实现，编辑了本地npm代码，在项目中也能使用编码后的代码

确保package.json已经正确配置好
在本地npm模块根目录下执行npm link，把本地模块注册到全局
在需要引用组件包的项目根目录下执行npm link npm-name,把第2步注册到全局的本地npm模块链接到项目的node_modules下，其中npm-name是指第一步中package.json中配置的模块名
正常使用npm包

6.常见错误

当前不是原始镜像，可能用的是其他镜像，如淘宝镜像

no_perms Private mode enable, only admin can publish this module

修改：将npm切回原始镜像

npm config set registry http://registry.npmjs.org

如果使用了nrm工具，可以使用命令nrm use npm切换

未登录

npm publish failed put 500 unexpected status code 401

修改：重新 npm login

包名被占用

npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?

修改包名

邮箱未验证

you must verify your email before publishing a new package

去官网验证一下邮箱

查看npm是否安装成功

npm who am i

包名的限制：不能有大写字母、空格、下划线
由于需要使用Install注册组件，所以一定要注意组件中的name值

npm发布公共组件包