前端工程化 搭建私有组件库 组件从开发到发布私有npm仓库的全过程

这篇具有很好参考价值的文章主要介绍了前端工程化 搭建私有组件库 组件从开发到发布私有npm仓库的全过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言
基于Vue3.0 + TS的组件从开发组件库到发布私有npm仓库的全过程

环境
这里列出本文所使用的环境版本

vue 3.0

vue/cli 4.5.9

nodeJs 14.15.1

npm 6.14.8

vue --version
@vue/cli 4.5.9

npm -v
6.14.8

node -v
v14.15.1
步骤

  1. 创建项目
    使用 vue-cli 创建一个 vue3 项目,假设项目名为 avatar-ui-vue

vue create avatar-ui-vue

选择自定义Manually select features,回车进入下一步

选中Choose Vue version、Babel 、TypeScript、 CSS Pre-processors 这4项,回车进入下一步

Choose a version of Vue.js that you want to start the project with 选择 3.x (Preview)
Use class-style component syntax? 输入n
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 输入y
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) 选择 Sass/SCSS (with dart-sass)
Where do you prefer placing config for Babel, ESLint, etc.? 选择 In dedicated config files
Save this as a preset for future projects? 输入y,回车后输入模板名保存模板

最后回车,等待项目创建完成

创建完成,目录结构如图

  1. 规划目录
    ├─ build // 编辑打包脚本目录,用于存放脚本文件
    │ ├─ rollup.config.js
    ├─ docs // 文档目录,用于生成 vuepress 文档页面
    │ ├─ .vuepress
    │ ├─ guide
    │ ├─ README.md
    ├─ examples // 原 src 目录,改成 examples 用于示例展示
    │ ├─ App.vue
    │ ├─ main.ts
    ├─ packages // 新增 packages 目录,用于编写存放组件,如button
    │ ├─ button
    │ ├─ index.ts
    ├─ typings // 新增 typings 目录,用于存放 .d.ts 文件,把shims-vue.d.ts移到这里
    │ ├─ shims-vue.d.ts
    ├─ .npmignore // 新增 .npmignore 配置文件
    ├─ vue.config.js // 新增 vue.config.js 配置文件

将 src 目录改为 examples ,并将里面的 assets 和 components 目录删除,移除 App.vue 里的组件引用。

调整后的目录结构如图

  1. 项目配置
    3.1 vue.config.js

新增 vue.config.js 配置文件,适配重新规划后的项目目录

const path = require(‘path’)

module.exports = {
// 修改 pages 入口
pages: {
index: {
entry: “examples/main.ts”, //入口
template: “public/index.html”, //模板
filename: “index.html” //输出文件
}
},
// 扩展 webpack 配置
chainWebpack: (config) => {
// 新增一个 ~ 指向 packages 目录, 方便示例代码中使用
config.resolve.alias
.set(‘~’, path.resolve(‘packages’))
}
}

3.2 .npmignore

新增 .npmignore 配置文件,组件发布到 npm 中,只有编译后的发布目录(例如lib)、package.json、README.md才是需要被发布的,所以我们需要设置忽略目录和文件

忽略目录

.idea
.vscode
build/
docs/
examples/
packages/
public/
node_modules/
typings/

忽略指定文件

babel.config.js
tsconfig.json
tslint.json
vue.config.js
.gitignore
.browserslistrc
*.map

3.3 tsconfig.json

修改 tsconfig.json 中 paths 的路径

"paths": {
  "@/*": [
    "src/*"
  ]
}

改为

"paths": {
  "~/*": [
    "packages/*"
  ]
}

修改 include 的路径

“include”: [
“src//*.ts",
"src/
/.tsx",
"src/**/
.vue”,
“tests//*.ts",
"tests/
/*.tsx”
]
改为

“include”: [
“examples//*.ts",
"examples/
/.tsx",
"examples/**/
.vue”,
“packages//*.ts",
"packages/
/.tsx",
"packages/**/
.vue”,
“typings//*.ts",
"tests/
/.ts",
"tests/**/
.tsx”
]
3.4 package.json

修改 package.json 中发布到 npm 的字段

name:包名,该名字是唯一的。可在 npm 官网搜索名字,如果存在则需换个名字。

version:版本号,每次发布至 npm 需要修改版本号,不能和历史版本号相同。

description:描述。

main:入口文件,该字段需指向我们最终编译后的包文件。

typings:types文件,TS组件需要。

keyword:关键字,以空格分离希望用户最终搜索的词。

author:作者信息

private:是否私有,需要修改为 false 才能发布到 npm

license: 开源协议

参考设置:

{
“name”: “avatar-ui-vue”,
“version”: “0.1.0”,
“private”: false,
“description”: “基于vue3+vant的前端组件库”,
“main”: “lib/index.min.js”,
“module”: “lib/index.esm.js”,
“typings”: “lib/index.d.ts”,
“keyword”: “vue3 vant”,
“license”: “MIT”,
“author”: {
“name”: “yourname”,
“email”: “youremail@126.com”
}
}

在 package.json 的 scripts 新增编译和发布的命令

“scripts”: {
“build”: “yarn build:clean && yarn build:lib && yarn build:esm-bundle && rimraf lib/demo.html”,
“build:clean”: “rimraf lib”,
“build:lib”: “vue-cli-service build --target lib --name index --dest lib packages/index.ts”,
“build:esm-bundle”: “rollup --config ./build/rollup.config.js”
}
其中 build:lib 是利用 vue-cli 进行 umd 方式打包,build:esm-bundle 是利用 rollup 进行 es 方式打包,具体参数解析如下:

–target: 构建目标,默认为应用模式。改为 lib 启用库模式。

–name: 输出文件名

–dest : 输出目录,默认 dist。改成 lib

[entry]: 入口文件路径,默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。

以下是完整package.json参考示例

{
“name”: “avatar-ui-vue”,
“version”: “0.1.0”,
“private”: false,
“description”: “基于vue3+vant的前端组件库”,
“main”: “lib/index.min.js”,
“module”: “lib/index.esm.js”,
“typings”: “lib/index.d.ts”,
“keyword”: “vue3 vant”,
“license”: “MIT”,
“author”: {
“name”: “zh”,
“email”: “”
},
“scripts”: {
“serve”: “vue-cli-service serve”,
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”,
“build”: “yarn build:clean && yarn build:lib && yarn build:esm-bundle && rimraf lib/demo.html”,
“build:clean”: “rimraf lib”,
“build:lib”: “vue-cli-service build --target lib --name index --dest lib packages/index.ts”,
“build:esm-bundle”: “rollup --config ./build/rollup.config.js”
},
“dependencies”: {
“core-js”: “^3.6.5”,
“vue”: “^3.0.0”
},
“devDependencies”: {
“@rollup/plugin-node-resolve”: “^13.0.5”,
“@vue/cli-plugin-babel”: “~4.5.0”,
“@vue/cli-plugin-typescript”: “~4.5.0”,
“@vue/cli-service”: “~4.5.0”,
“@vue/compiler-sfc”: “^3.0.0”,
“rollup”: “^2.58.0”,
“rollup-plugin-terser”: “^7.0.2”,
“rollup-plugin-typescript2”: “^0.30.0”,
“rollup-plugin-vue”: “^6.0.0”,
“sass”: “^1.26.5”,
“sass-loader”: “^8.0.2”,
“typescript”: “~4.1.5”
}
}

3.5 rollup.config.js

新增 rollup.config.js,rollup 打包脚本

// import vue from ‘rollup-plugin-vue’
import { nodeResolve } from ‘@rollup/plugin-node-resolve’
import path from ‘path’
// import commonjs from ‘@rollup/plugin-commonjs’
import { terser } from ‘rollup-plugin-terser’
import typescript from ‘rollup-plugin-typescript2’
import pkg from ‘…/package.json’
const deps = Object.keys(pkg.dependencies)
// eslint-disable-next-line @typescript-eslint/no-var-requires
const vue = require(‘rollup-plugin-vue’)

export default [
{
input: path.resolve(__dirname, ‘…/packages/index.ts’),
output: [
{
format: ‘es’,
file: pkg.module,
}
],
plugins: [
terser(),
nodeResolve(),
// commonjs(),
vue({
target: ‘browser’,
css: false,
exposeFilename: false,
}),
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: true,
},
‘include’: [
‘packages//*',
‘typings/shims-vue.d.ts’,
],
‘exclude’: [
‘node_modules’,
'packages/
/tests/*’,
],
},
abortOnError: false,
}),
],
external(id) {
return /^vue/.test(id)
|| deps.some(k => new RegExp(‘^’ + k).test(id))
},
},
]

  1. 开发组件
    下面以Button组件作为开发示例,在 packages 目录下新建 index.ts 文件和 button 文件夹,在 button 下新建 index.ts 和 src/button.vue,结构如图

button.vue

button/index.ts,单独组件的入口文件,在其他项目可以使用 import { xxx } from ‘nandit-vue-vant’ 方式进行单个组件引用

import { App } from ‘vue’
import Button from ‘./src/button.vue’

// 定义 install 方法, App 作为参数
Button.install = (app: App): void => {
app.component(Button.name, Button)
}

export default Button
index.ts 作为组件库的入口文件,可以在其他项目的 main.ts 引入整个组件库,内容如下

import { App } from ‘vue’
import NdButton from ‘./button’

// 所有组件列表
const components = [ NdButton ]

// 定义 install 方法, App 作为参数
const install = (app: App): void => {
// 遍历注册所有组件
components.map((component) => app.component(component.name, component))
}

export {
NdButton
}

export default {
install
}

这样,我们就完成一个简单的 button 组件,后续需要扩展其他组件,按照 button 的结构进行开发,并且在 index.ts 文件中 components 组件列表添加即可。

  1. 编写示例
    组件开发完成后,我们本地先测试一下,没有问题再发布到 npm 仓库。在示例入口 main.ts 引用我们的组件库

import { createApp } from ‘vue’
import App from ‘./App.vue’
import NanditVue from ‘~/index’ // 这里 ~ 就是在 tsconfig.json 以及 vue.config.js 配置的 packages 路径

const app = createApp(App)
app.use(NanditVue)
app.mount(‘#app’)
App.vue 删除项目初始化的 HelloWorld 组件

组件示例
{{ count }}

启动项目,测试看看

yarn serve

  1. 发布组件
    组件开发并测试通过后,就可以发布到 npm 仓库提供给其他项目使用了,首先执行编译库命令,生成 lib 目录

yarn build

6.1 发布到npm官网

6.1.1 注册npm账号

前往官网注册 npm 账号,如果已注册过,则跳过此步骤

6.1.2 登录npm账号

在项目中 terminal 命令窗口登录 npm 账号

npm login
Username:
Password:
Email:(this IS public)
输入在 npm 注册的账号、密码、邮箱

6.1.3 发布

确保 registry 是 https://registry.npmjs.org

npm config get registry
如果不是则先修改 registry

npm config set registry=https://registry.npmjs.org
然后执行命令

npm publish
如果需要删除已发布的组件(不推荐删除已发布的组件),则执行以下命令(加 --force 强制删除)

npm unpublish --force
删除指定版本的包,比如包名为 nandit-vue-vant 版本 0.1.0

npm unpublish nandit-vue-vant@0.1.0
如果24小时内有删除过同名的组件包,那么将会发布失败,提示

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\tools\nodejs\node_cache_logs\2021-10-18T09_58_58_933Z-debug.log
只能换一个名称发布或者等24小时之后发布,所以不要随便删除已发布的组件(万一有项目已经引用)

内部私有前端组件库,前端,npm,vue.js

搭建npm私库
1、安装verdaccio
首先电脑上要安装有nodejs
windows+r cmd 之后
npm install -g verdaccio
1
如下图所示:安装完成后如果没有提示错误则表示安装

2、启动verdaccio

3、修改配置文件 config.yaml

3.1 在配置文件的末尾添加listen: 0.0.0.0:4873【配置此选项则是允许任何外部的所有IP都可以访问到此服务】

使用本地库
verdaccio 服务启动完成后可通过 nrm 工具进行源地址切换

全局安装 nrm

$ npm install -g nrm
1
2
安装完成后通过如下命令查看已有配置

$ nrm ls
报错require open的话把这一行注释掉

  • npm ---------- https://registry.npmjs.org/
    yarn --------- https://registry.yarnpkg.com/
    tencent ------ https://mirrors.cloud.tencent.com/npm/
    cnpm --------- https://r.cnpmjs.org/
    taobao ------- https://registry.npmmirror.com/
    npmMirror ---- https://skimdb.npmjs.com/registry/

添加本地库至 nrm 配置列表

添加配置项

nrm add zh http://localhost:4873

切换 npm 源至私库

nrm use zh

添加环境用户并根据提示输入用户名密码,为后续传包做准备 (重要)

添加配置项

nrm add zh http://localhost:4873

切换 npm 源至私库

nrm use zh

添加环境用户并根据提示输入用户名密码,为后续传包做准备 (重要)

npm adduser --registry http://localhost:4873/

添加配置项

nrm add localNpm http://localhost:4873

切换 npm 源至私库

nrm use localNpm

直接发布

$ npm publish

或指定源

$ npm publish --registry http://localhost:4873

内部私有前端组件库,前端,npm,vue.js

至此简单环境配置完毕文章来源地址https://www.toymoban.com/news/detail-781196.html

到了这里,关于前端工程化 搭建私有组件库 组件从开发到发布私有npm仓库的全过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端工程化实战-开发企业级CLI

    1. 前言 脚手架大家一定都不陌生,比如我们经常使用的 vue-cli、create-react-app,它可以帮助我们快速的初始化一个项目,无需从零配置,极大的方便我们的开发。到这里你可能会疑惑,既然市面上有成熟的脚手架,为什么需要写一个属于自己的脚手架呢。因为公共脚手架虽然强

    2024年02月12日
    浏览(56)
  • 手把手完成前端Vue3 + Vite项目工程化搭建

    基于 Vue3 + Vite 搭建的前端工程化项目演示模板 开发环境: Node.js v16.14.2 + npm v8.3.2 开发工具: Visual Studio Code or WebStorm 源代码管理: Git npm镜像: npm config set registry https://registry.npmmirror.com 技术栈 描述 Vue 渐进式 JavaScript 框架 Vite 新一代前端开发与构建工具 Element Plus 基于 Vue

    2024年04月11日
    浏览(68)
  • 探索现代前端工程化工具与流程:提升开发效率和项目质量

    前端工程化是指利用各种工具和技术来提高前端开发效率、代码质量和团队协作的一种开发模式。 它的背景和发展与前端技术的演进密切相关。 在过去,前端开发主要依靠手工编写 HTML、CSS和JavaScript 来构建网页。随着互联网的发展和前端技术的不断演进,前端的工作变得更

    2024年02月14日
    浏览(74)
  • Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署

    Ajax介绍 Axios 案例 前后端分离 前端工程化 环境准备,nodejs安装,D:javaprojectjavawebday03-Vue-Elementday03-Vue-Element资料NodeJS安装文档 Vue项目简介 它本来默认端口号是8080 ,但这就和tomcat冲突了所以修改为7000 Vue项目开发流程 Vue组件库Element pagination分页组件,table表格组件,Dial

    2024年02月05日
    浏览(70)
  • 20230529----重返学习-复合组件通信redux-redux源码-redux工程化开发-自定义hook

    要想实现复合组件通信,一般采用公共状态管理方案。 常见的公共状态管理方案: 官方推荐的:redux。 redux + react-redux + redux-logger / redux-promise / redux-saga / redux-thunk :中间件。 代表:dva「redux-saga 」或 umi。 @reduxjs/toolkit :工具类。 mobx 。 zustand 。 … redux的应用场景 redux 在以

    2024年02月06日
    浏览(54)
  • 前端工程化详解——理解与实践前端工程化

    前言: 前端工程化一直是一个老生常谈的问题,不管是面试还是我们在公司做基建都会经常提到前端工程化,那么为什么经常会说到前端工程化,并没有听过后端工程化、Java工程化或者Python工程化呢?我们理解的前端工程化是不是一直都是Webpack的性能调优,或者是一个cli工

    2024年02月02日
    浏览(82)
  • 为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)

    因历史遗留原因,接手的项目没有代码提醒/格式化,包括 eslint、pretttier,也没有 commit 提交校验,如 husky、commitlint、stylelint,与其期待自己或者同事的代码写得完美无缺,不如通过一些工具来进行规范和约束。 eslint 是一个代码校验工具,用来规范项目代码风格。 初始化 通

    2024年02月14日
    浏览(104)
  • 前端工程化

    手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构, 本身是由一堆节点(Node)组成,每个节点都表示源代码中的一种结构。 不同结构用类型(Type)来区分,常见的节点类型有Identifier(标识符),Expression(表达式),VariableDeclarat

    2023年04月11日
    浏览(101)
  • 前端工程化-NPM

    NPM代表npmjs.org这个网站,这个站点存储了很多Node.js的第三方功能包。 NPM的全称是Node Package Manager,它是一个Node.js包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段,并且通过NPM管理需要分享的代

    2024年02月09日
    浏览(102)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包