正文 

当前位置： 首页 > java > java教程

开发npm第三方库的实战经验(代码片段)

薛瑄 薛瑄     2022-12-14     528

关键词：

最近在做一个第三方npm库，在本地调试，打包，发布阶段，深入了解了一下，不少参数的配置、工具的使用，这里总结记录一下

文章目录

一、编译

这一步是为提供不同的使用方式，例如：ts写的代码，发布后可供ts和js使用，或者 通过标签<script src="..."></script>引入

编译TypeScript

使用 tsc CLI 工具，我们可以将一个TypeScript文件编译成某一个指定版本的ECMA Script文件。

JavaScript这种无类型语言，最容易产生bug，所以TypeScript诞生了。浏览器引擎和Node.js都能够直接运行JavaScript，但无法直接运行TypeScript。 于是就有了tsc命令行，用于把TypeScript编译为JavaScript（准确来说是ECSA Script，不过不同的环境对ECMA的各个版本兼容性又不太一样，往往还需要借助某些工具如babel 进一步编译成兼容各种浏览器环境的代码）

可以通过 tsc 命令直接传入参数，也可以通过 tsconfig.json来设置参数

tsconfig.json 配置


  "compilerOptions": 
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./lib",
    "strict": true，

  ,
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*"]

  • target：编译之后生成的 JavaScript 文件需要遵循的标准，可选值：“ES3”（默认），“ES5”，“ES6”/“ES2015”，“ES2016”，“ES2017"或"ESNext”。我们选择了 es5 为了使包具有更好的浏览器兼容性。

  • module：指定生成哪个模块系统代码，默认值：target === “ES3” or “ES5” ? “CommonJS” : “ES6”。

  • declaration：是否生成对应的声明文件，默认值：false。在构建包时，应该设置为 true，这样 TypeScript 会将生成的声明文件和对应编译后的 JavaScript 代码一起导出，以便包可以在 TypeScript 和 JavaScript 项目中同时使用。本项目中生成的声明文件是 /lib/index.d.ts。

  • outDir：指定输出目录。编译后的 JavaScript 代码会在与 tsconfig.json 同级的 lib 文件夹中。

  • strict：是否启用所有严格类型检查选项，默认值：false。

  • include：指定要编译的目录。

  • exclude：指定不编译的目录。node_modules 和 tests 只是在开发阶段使用，构建阶段无需编译。

更多编译选项，看这里

tsc编译出来的只是代码，一个完整的npm，必须在根目录下包含package.json（这会在npm publish时，自动加入到生成的npm包中）

webpack

想通过标签引入的话，可使用webpack 打包为一个js文件

后续上传到仓库时，只需上传生成目录里的文件就可以了。那么该如何指定只上传该目录的文件呢？ 或者 是React-Native项目，还有Android 、iOS的文件也要上传呢？ 接着来看，指定上传的包文件

二、指定包文件

在 .gitignore 中，我们添加 /lib 是因为不想 Git 远程仓库中有编译后的文件，但对于要发布的包则恰恰相反，我们不要源代码，只需要编译后的文件！有两种方式可以实现：

黑名单：

新建一个 .npmignore 文件，在其中添加不要的文件（夹），如果没有.npmignore，将会用.gitignore来代替

src
tsconfig.json
tslint.json
.prettierrc

这并不是一个好的实践，因为根目录下每次新增加一个文件（夹）都需要添加到 .npmignore 中，很容易忘记添加，导致敏感文件被打包发布，于是有了下面这种方式。

白名单：

在 package.json 中设置一个要发布的文件（夹）白名单"files": [“lib/**/*”]
只有 lib 文件夹会出现在发布的包里（README.md 和 package.json 会被默认添加）。

更多关于黑名单 VS 白名单的内容可以参考 blog.npmjs.org/post/165769…

如果是RN项目，就指定Android、iOS的目录到 package.json 的files中，像这样react-native-screens 的package.json

如果想像 react-navigation 在同一个工程下，对多个三方库进行发布 管理，可以使用Lerna

三、调试

关于如何在本地的主工程引用调试第三方库，有三种方式，建议使用第三种：

1、link

网上很多文章介绍的是npm link，但是它会有很多问题。 建议使用npx link

npx link <package-path>

2、在package.json 中使用本地路径

  "dependencies": 
    "bar": "file:../foo/bar"

3、使用yalc

使用上面两种方式，需要你手动去指定打包好的路径。yalc 的方案是在本地模拟一个 npm 仓库，把三方库发布到 .yalc目录下，真实发包无异。

安装

 npm install yalc -g   // 全局安装

使用

 //在第三库工程的根目录下执行 。重新发布也是执行该命令
 //把三方库发布到 .yalc目录下
 yalc publish  
 // 在主工程的根目录下执行， my_library 是三方库工程的名称（package.json name的值）
 // 在主工程的package.json 中可以看到，是引用了本地 .yalc 目录的三方库
 yalc add my_library

移除依赖

 yalc remove [my-package]  // 具体的某一个包 
 yalc remove --all // 移除所有依赖并还原

​查看仓库信息

 yalc installations show

四、发布npm包

先在https://www.npmjs.com/ 注册账号

npm login # 登陆

npm publish # 发布

如果是发布到其他的仓库，可以在package.json中配置publishConfig ，它与命令行中 config 选项的参数是一样的

"publishConfig": 
      //默认是 https://registry.npmjs.org/
    "registry": "https://registry.xxxxx.com/"

为发布过程 添加scripts

npm publish 会触发一些 scripts ，我们可以在发布前后，做一些代码检查，格式化等 。往往我们每次发版也需要更新版本，提交代码等，也可以通过npm version 来让这些步骤自动执行。如下：

"scripts": 
  //npm version 命令 依次触发的三个脚本，
  "preversion": "npm run test",
  "version": "npm run format && git add -A src",
  "postversion": "git push && git push --tags"

  • version：该命令执行后，会自动打上tag，新增一次commit

  • postversion：此时代码已经自动执行了 git commit，所以可以推送

参考：

[译文]一步步构建发布一个 TypeScript NPM 包
【npm publish package】发布流程
【一库】yalc: 可能是最好的前端link调试方案
发布一个 npm 包，构建自己的第三方库
https://www.zhihu.com/question/334938460
https://juejin.cn/post/6844904112153165832

开发npm第三方库的实战经验(代码片段)

最近在做一个第三方npm库，在本地调试，打包，发布阶段，深入了解了一下，不少参数的配置、工具的使用，这里总结记录一下文章目录一、编译编译TypeScriptwebpack二、指定包文件黑名单：白名单：... 查看详情

android项目必备（四十一）--＞android开发实战经验总结(代码片段)

...录1.理解抽象，封装变化2.选好"车轮"3.抽象依赖第三方框架4.从MVC到MVP5.归档代码6.性能优化7.实践新技术8.UML9.自造"车轮"10.扩大技术圈11.写博客总结1.理解抽象，封装变化目前Android平台上绝大部分开发都是用着... 查看详情

android项目必备（四十一）--＞android开发实战经验总结(代码片段)

...录1.理解抽象，封装变化2.选好"车轮"3.抽象依赖第三方框架4.从MVC到MVP5.归档代码6.性能优化7.实践新技术8.UML9.自造"车轮"10.扩大技术圈11.写博客总结1.理解抽象，封装变化目前Android平台上绝大部分开发都是用着... 查看详情

『flutter开发实战』一小时掌握dart语言(代码片段)

 参考：https://dart.cn/guides/language/language-tourDart开发语言概览本文将从变量和运算符开始到类和库的使用来向你介绍Dart编程语言的主要功能，这里假设你已经有使用其它语言进行编程的经验。你可以通过查看 Dart库概览 ... 查看详情

(21/24)webpack实战技巧：webpack对三方类库的优化操作(代码片段)

...第一步--选用引入方式在前面的学习中我们对于如何引入第三方类库（Jquery）推荐了两种方式，第一种是import引入的方式，第二种是ProvidePlugin插件。那两种引入方法有什么区别那?import引入方法：引用后不管你在代码中使用不使... 查看详情

脚手架搭建及发布npm(代码片段)

...成多套开发模板，根据项目需要选择合适的模板。二.第三方库的支持实现一个脚手架，通常需要 查看详情

脚手架搭建及发布npm(代码片段)

...成多套开发模板，根据项目需要选择合适的模板。二.第三方库的支持实现一个脚手架，通常需要 查看详情

vue开发实战拓展篇#47：如何发布组件到npm以及nrm的介绍(代码片段)

说明【Vue开发实战】学习笔记。发布到npm具体可以参考我的这篇文章：怎么将自己写的库发布到npm上面？这里具体介绍一下nrm的使用什么是nrmhttps://github.com/Pana/nrmnrm可以帮助您轻松快速地在不同的NPM注册表之间切换，... 查看详情

vue开发实战实战篇#34：如何在组件中使用echartsantv等其他第三方库(代码片段)

说明【Vue开发实战】学习笔记。效果这里我们使用echarts为例在项目里面添加echarts库安装依赖npmiechartsresize-detectorChart.vue<template><divref="chartDom"></div></template><script>import*asechartsf 查看详情

开发经验如何快速接入第三方接口(代码片段)

...Http请求报文1.1fiddler工具1.2javasocket代码1.3TCP工具背景​在第三方接口对接时，往往会出现如下问题。接口提供方接口已经提供好，文档标准规范，但是调用方始终无法调用成功。RestTemplate也是从网上找来的代码，... 查看详情

开发经验如何快速接入第三方接口(代码片段)

...Http请求报文1.1fiddler工具1.2javasocket代码1.3TCP工具背景​在第三方接口对接时，往往会出现如下问题。接口提供方接口已经提供好，文档标准规范，但是调用方始终无法调用成功。RestTemplate也是从网上找来的代码，... 查看详情

harmonyosarkts本地库&三方库的用法(代码片段)

...（Stage模型）本项目基于HarmonyOS的ArkUI框架TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：基于TS扩展的声明式开发范式，效果演示依赖库实际项目中，我们 查看详情

移动端真机调试实战经验(代码片段)

.../cherryblog.site/，欢迎大家到我的博客查看更多文章~前言在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开... 查看详情

查看python第三方库的依赖(代码片段)

背景平时开发直接pipinstall命令即可安装所需的python第三方库,但是部署项目到生产环境时,可能服务器并不能访问外网,pipinstall没办法使用,只能将第三方包打包,离线安装,这就涉及到要打包的第三方库及其所依赖的库.方法1pipshow库... 查看详情

六npm与包(代码片段)

一、包1.1、什么是包Node.js中的第三方模块又叫做包。就像电脑和计算机指的是相同的东西，第三方模块和包指的是同一概念，只不过叫法不同。1.2、包的来源不同于Node.js中的内置模块与自定义模块，包是由第三方个... 查看详情

1小程序vant_webapp组件库的安装步骤和简单使用

...序对于npm的支持目前，小程序当中已经支持使用npm安装的第三方包，通过使用这些第三方包，我们可以提高对小程序开发的效率，但是在小程序当中使用所谓的npm包有如下的三个限制不能支持依赖于Node.js内置库的包因为小程序... 查看详情

flutter--实战在macos上搭建flutter开发环境(代码片段)

...idStudio创建Flutter工程2.工程结构解析3.实例代码解析4.使用第三方功能库环境搭建一、准备要安装并运行Flutter，您的开发环境必须满足以下最低要求:操作系统:macOS(64-bi 查看详情

rollup实战第三节打包生产(代码片段)

前面讲过了，rollup如何打包开发环境。现在肯定是打包成生产环境了。本次需要实现的功能是把库打包成生产环境。由于本次代码是基于前两次的基础上的，如果有问题的还请移步前两节。（实战rollup第一节入门࿰... 查看详情