封装组件到发布npm全过程

lxj29
4,779 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

一、创建vue项目

这里我使用脚手架搭建，原因：不用自己一个个引入组件库，节省了配置文件的时间。

  • 在components下Dialog.vue和index.js

    Dialog.vue：定义组件

    index.js：将组件注册为全局组件

    |--components
	|--Dialog.vue
	|--index.js

二、添加组件结构样式

一般做项目UI组件是复用率最高的，所以为了减少copy次数，组件功能尽量完整。

  • 结构大致分为：背景、主体、主体头、主体内容、主体底
  • 样式看具体需求

三、注册全局组件

如果想在vue中注册全局组件，就需要使用vue.use()，需要在调用 new Vue() 之前使用。

在index.js中引入组件，并注册组件(Vue.component('名字','对象))，暴露install方法。分为三步：

  • 引入组件
  • 定义install方法并注册为全局组件
  • 暴露install方法
import Dialog from './Dialog'

const install = (Vue) => {
  Vue.component(Dialog.name, Dialog)
}

export default {
  install
}

在main中进行全局引入

import Vue from 'vue'
import App from './App.vue'
import LxjUI from './components'

Vue.config.productionTip = false
Vue.use(LxjUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

组件测试

  • 在App中测试组件

    <template>
  <div id="app">
    <xj-dialog title='你好！'>
      <h3>这是我的dialog组件</h3>
    </xj-dialog>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

  • 展示样例：

Snipaste_2022-04-20_15-38-16.png

  • 到这里dialog组件就封装完毕了

四、打包

什么是打包？

​ 我理解的打包是 js、css、html 合并，将多个文件打包成一个文件并解决浏览器兼容问题。

​ 以webpack为例：

  1. 提高性能，压缩体积。模块化开发有很多引用关系，打包后会变成一个js，减少了http请求。
  2. 将高版本js语法转为低版本。开发过程中可能会使用ES6语法，打包后能将语法转为ES5.
  3. 能将Less、Sass编译成css

为什么要打包？

组件封装完成，现在只是自己的项目可以使用，但是我们需要让别人的项目也能使用，所以需要打包成js文件。

vue文件会打包成dist文件，不仅节约资源，还能让其他浏览器也能解析

这里使用webpack打包，需要配置package.json文件的scripts，新增build命令。

由于我是用脚手架创建的vue项目，所以默认初始化了package.json。

  • 初始化package.json

  • 在package.json中新增一行命令

    "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib ./src/components/index.js" // 新增命令
  }

  • 执行打包命令：npm run lib

  • 项目就生成了dist

    • 在dist路径下会有多个js文件，这是因为打包生成了多种js规范的文件。
    • 发布时，因为js文件较多，用户不可能全部使用，需要指定入口文件

  • 这样我们的打包部分就完成了

五、发布到npm

发布到npm有很多注意点，学习发包的时候注意不到很多问题，以为简单的npm publish 就行。自己发包的时候才发现原来还有那么多细节。

  • 第一步：设置package.json中的配置项

    • 如果想把包发布到npm上，package.json中的private必须是false，需要将其设置为公用包："private":false

    • name必须为npm上没有的包，否则不能上传

    • 同时我们可以指定入口文件"main":"dist/lxj-ui-upload.umd.min.js"

    • 我们可以添加其他个人信息：

        "name": "lxj-ui",
  "version": "0.0.1",
  "private": false,
  "main": "dist/lxj-ui.umd.min.js",
  "author": {
    "name": "liuxueji",
    "github":"https://github.com/liuxueji/lxj-ui"
  },

  • 第二步：根目录下增加一个.npmignore文件

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

    # 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

  • 第三步：上传到npm

    • 如果安装了nrm，需要保证当前的源是npm，不能是淘宝源镜像

      修改为npm原镜像

      npm config set registry=https://registry.npmjs.org

      修改为淘宝源镜像

      npm config set registry https://registry.npm.taobao.org

    • 添加npm用户

      • 进入dist目录，添加npm用户，执行命令：
      • npm adduser
      • 第一次发包需要设置

    • 使用npm login登录

    • 上传的包不是立马显示出来的，需要过一段时间

      • 在dist目录下执行命令：
      • npm publish
      • 发布失败的原因：npm中包名可能已经存在
      • 发布完成，npm包显示会有延迟

六、测试npm

进入npm官网直接搜索name属性的名字，如果能搜到就可以使用，如果搜不到可能是发包失败或者还没更新

  • 将组件下载到本地项目

    npm i lxj-ui //将我们包下载下来，就可以在项目的node-modules路径下找到这个包了

  • 使用lxj-ui

    • 在main中导入组件和组件依赖的样式

      import LxjUi from 'lxj-ui' 
import 'lxj-ui/dist/lxj-ui.css'  
Vue.use(LxjUi)

  • 在App.vue中测试一下

        <xj-dialog title='你好！'>
      <h3>这是我的dialog组件</h3>
    </xj-dialog>

Snipaste_2022-04-20_15-38-16.png

  • 到这里我们的自定义ui组件库就封装完成了。

总结

这篇文章只是简单的封装Vue组件并发布到npm仓库，加强了Vue的install方法使用，加深了传参、插槽的使用，了解了打包相关知识。

一个好的组件，应该具有很高的复用性和广泛的适用范围、极强的扩展性。

avatar
文章
阅读
粉丝