vue实现组件库-上传到NPM

最近学习了一下怎么写组件库，简单记录一下如何将写好的组件库上传到NPM。

1. 组件库的目录

组件库不需要目录src，可以在根目录存放packages和examples（非必须）目录。

• packages：存放封装好的的组件。
• examples：放一些测试用例，可以直接把src改成examples
  

如果想运行 examples 里面的测试case，需要调整 npm run serve 时的运行文件。

配置 vue.config.js 中的入口文件，设置为 examples 目录下的 main.js 文件，entry:'examples/main.js'。

const path = require('path')
module.exports = {
  pages:{
    index:{
      // 修改项目入口文件
      entry:'examples/main.js',
      template:'public/index.html',
      filename:'index.html'
    }
  },
  // 扩展webpack配置,使webpages加入编译
  // 使用babel处理可以将高版本语法转成低版本语法
  chainWebpack: config => {
    config.module
    .rule('js')
    .include.add(path.resolve(__dirname,'packages')).end()
    .use('babel')
    .loader('babel-loader')
    .tap(options => {
      return options
    })
  }
}

2. 在 packages 目录下新增 index.js 文件

主要是为了提供一个 install 方法，这样可以安装 vue.js 插件。

// 整个包的入口
import Button from './button'
import Dialog from './dialog'
import Input from './input'
import './fonts/font.scss'
const components = [
  Button,
  Dialog,
  Input
]
const install = function (Vue) {
  console.log('install all components')
  // 全局注册所有的组件
  components.forEach((component) => {
    Vue.component(component.name, component)
  })
}
// if use Vue in script like <script scr='....vue.min.js'></script> then install
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  install
}

3. 打包组件库

vue-cli给开发者提供了很多构建目标的命令，我们可以将我们的vue项目构建成应用、库或者Web Components组件。
在package.json文件中新增："lib": "vue-cli-service build --target lib packages/index.js"

所以我们在package.json文件中的script下加入该条指令，并且命名为lib，需要注意的是，我们需要在打包指令后面加上需要打包的路径，这里我们指定为 packages/index.js 。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib packages/index.js"
  },

在终端执行 npm run lib 命令就可以对packages/index.js指定的组件进行打包了。打包完成后，会生成一个名为dist的目录，里面是我们打包生成的文件。

4. 新增 .npmignore 文件

在根目录下新增 .npmignore 文件。

这个文件的作用是将一些不需要上传到npm的路径、文件进行忽略，我们在上传到npm时就不会把这部分上传了。因为我们已经将项目打包好了，所以我们只用上传dist路径下的打包文件，不需要上传源码了。

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

5. 上传到NPM

在 package.json 中增加一些相关的内容，还有个人信息

{
 "name": "@gt1ng/componentui",
  "version": "0.1.0",
  // private一定要改成 false，不然无法上传到NPM
  "private": false,
  "main": "dist/componentui.umd.min.js",
  "auth": {
    "name": "gting"
  },
}

打包过程：

1. 如果安装了nrm，需要保证当前的源时是npm。
2. 使用npm login 登录。
3. 使用npm publish命令直接发布到npm上。

如果后面想要更新组件库的版本，记得修改 version 版本，再重新publish。

上传成功后，就可以在 NPM 官网搜到自己的组件库了。@gt1ng/componentui

6. 上传到 GitHub（可选）

1. 创建一个新仓库
2. 将代码push到新仓库（如果是新设备，可能需要新增一个ssh key）