本文整理了开发单个npm工具包的一些注意事项,包括环境搭建、构建目标、类型提示和外部依赖等。
先创建一个目录,以及初始的package.json文件
mkdir tools
cd tools
npm init -y
然后你就会得到一个最基础的项目
{
"name": "tools",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
记得选一个好名字,npm使用字符串作为包的名字,因此确保你选择的包名是唯一的,不会与现有的包发生冲突。你可以在npm官方网站上搜索你打算使用的包名,以确保它还没有被使用。最简单的方式是使用命名空间,即@xxx/packagename形式的包。
这个包作为一个完整的项目工程,并且会托管在开源仓库中,因此也需要具备基础的代码质量和检测工具,方便使用者可以直接阅读项目源码
ESLint是一个静态代码分析工具,用于检查和识别JavaScript代码中的潜在问题、错误和风格问题,它可以配置一组规则,并根据这些规则对代码进行静态分析和报告。
具体的使用可以参考官方文档
npm init @eslint/config -- --config semistandard
# 安装完成后就可以校验某个文件了,借助WebStrom等IDE工具,也可以快速检测项目源码文件夹中的所有文件
npx eslint yourfile.js
初始化eslint后,在项目根目录下会出现.eslintrc.{js,yml,json}配置文件,几个重要的字段包括
ESLint负责代码质量和风格的检查,而Prettier负责代码格式化的任务,Prettier它专注于代码的格式化和美化,可以自动调整代码的缩进、换行、引号等,使代码具有一致的风格。
Prettier可以通过插件的方式集成到ESLint中,以实现代码格式化的一致性。这样在代码检查过程中,ESLint会调用Prettier来格式化代码,并根据ESLint的规则来检查代码质量和风格
npm i prettier -D
# 配置文件
touch .prettierrc
配置文件一般包括缩进、单双引号等字段
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto"
}
配置好之后,可以通过命令prettier来格式化代码,不过更常规的操作是配置IDE,通过快捷键或自动保存时执行格式化操作的任务。
不论是eslint还是prettier,都依赖于开发者手动操作检测。为了避免不规范的代码提交到了git仓库中,需要借助git hooks,在commit或push前自动执行检测操作。
husky可以让我们向项目中方便添加git hooks。
npm install husky -D
在项目根目录下创建.husky文件夹,并在其中创建pre-commit文件。在该文件中指定需要在提交前运行的脚本,例如:
#!/bin/sh
echo "pre commit hooks"
# 某些提交前的任务,比如eslint检测等
lint-staged
添加钩子任务之后,可能会导致每次提交会多花一点时间,但可以让整个项目的代码变得更规范,还是很有必要的。
此外,提交记录也可以按照固定的格式,方便查看变更记录。可以通过commitizen来实现
# 安装时间可能会有点久
npm install -g commitizen
npm install -g cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
# 切换到项目,使用cz 替换commit命令
git cz
# 依次选择后续步骤
建议使用全局设置
构建工具包和构建业务代码的最大区别是:对应构建产物的目标对象不同。
对于业务代码而言,构建产物是直接部署到服务器上并让浏览器直接访问的,资源文件会直接通过script引用
<script src='https://xxx.cdn.com/fe/index-abcdef.js'></script>
因此打包出来的代码一般是IIFE的
(function(e){
// ...
})({'1':xx,'2':xx,...})
当然,随着现代浏览器对es module规范的逐渐支持,有的打包工具也支持直接打包浏览器规范的esmodule产物
import {xxx} from './vendor-ea058dad.js'
...
也就是说,业务代码的构建产物是面向浏览器的
对于工具包而言,构建产物主要是发布到npm仓库,供第三方通过npm install的方式安装到node_modules中,比如
import {ref} from 'vue'
也就是说,工具包的构建产物是面向开发者的。
这就存在一个很重要的顺序问题,先有工具包,其他开发者才能使用它。而在构建这个工具包的时候,我们无法预知这个包会在什么情况下使用。
所以,构建工具包,就需要从第三方开发者的角度考虑以下几个问题
使用的模块规范是什么,esm、commonjs、umd还是iffe
使用的语言是什么,typescript还是javascript,是否需要类型提示
项目是运行在浏览器还是Node环境下的,是否需要支持同构
代码是否已经完全构建,某些构建工具(如vue-cli中的babel-loader)默认会忽略所有 node_modules 中的文件以加快构建速度,就可能导致最终的构建产物包含es6的代码,从而出现浏览兼容错误
接下来看看JavaScript常用的几种模块规范
ESM(ES Modules)适用于现代浏览器和支持ES模块的环境,也可以在Node.js中使用(需要开启配置)
使用import和export语法进行模块导入和导出。支持静态分析和按需加载,可以实现更好的模块封装和代码优化。
借助静态分析的特性,esm模块还可以实现tree shaking的功能,将未被使用的依赖自动移除,优化构建速度和产物体积。
CommonJS使用require()和module.exports(或exports)语法进行模块导入和导出。在Node.js中是同步加载模块的,适用于服务器端和命令行应用。
主要用于Node.js环境,也可在一些构建工具(如webpack、Browserify)中使用
UMD(Universal Module Definition)用于同时支持浏览器环境和Node.js环境的情况,以及在不同的模块规范之间进行兼容性处理
UMD模块规范兼容了CommonJS和AMD(异步模块定义)的语法,以及全局变量的导出方式,可以在不同的环境中使用
IIFE(Immediately Invoked Function Expression)使用立即执行的函数表达式将模块代码封装在函数作用域内,防止变量冲突和全局污染。通过全局变量或参数传递来导出模块。
适用于老旧浏览器或不支持模块系统的环境,以及一些独立的库或插件。
目前,ESM已经成为现代前端开发的主流模块规范,因此对于一个工具包而言,必须要支持esm的构建产物
此外,由于还有大量项目运行在不支持esm的Node版本(NodeJS V13以下),因此,CommonJS的构建产物也需要实现。
由于前端工程化的推荐,直接运行在浏览器端的模块加载器requirejs、seajs等已经逐步淘汰、因此已经不太需要再构建umd类型的模块了。
至于IIFE,除了需要直接提供一整个文件,然后直接通过script标签引入的场景(快速创建一个html文件写demo)之外,也已经不太需要了。
得到了我们的构建目标,还需要再package.json中进行声明
"main": "dist/xxx.cjs.js",
"module": "dist/xxx.esm.js",
当第三方开发者的引用这个包的时候,就会根据工具或者环境自动加载main或者module入口文件的内容。
确认了构建目标之后,还需要选择合适的工具将源代码打包成符合要求的输出文件。目前比较主流的还是webpack打包业务产物、rollup打包工具包(当然vite借助rollup也可以输出业务产物了)
首先安装rollup
npm install --save-dev rollup
编写配置文件rollup.config.js,类似于下面的配置
Copy code
export default {
input: 'src/index.js', // 输入文件路径
output: [
{
file: 'dist/xxx.cjs.js', // 输出文件路径
format: 'cjs', // 输出模块的格式,例如:'cjs', 'es', 'umd'
}
{
file: 'dist/xxx.esm.js',
format: 'es',
}
],
plugins: [
// 插件配置,例如babel、commonjs等
]
};
然后就可以通过rollup -c命令进行构建,在实际开发中,还需要根据需求进行各种配置和插件的使用,这里不在赘述。
即使开发的是纯javascript项目,我们也更希望有一些智能的提示,来获得更好的代码体验。
因此,不论第三方开发者是否需要,一个工具包都应该尽量提供类型声明
npm i typescript -D
然后在项目根目录创建基础的tsconfig.json配置文件
{
"compilerOptions": {
"module": "es6",
"strict": true,
"declaration": true, // 需要输出声明文件
"esModuleInterop": true
},
"include": ["src"]
}
TypeScript本身提供了编译器(tsc)可以将TypeScript代码编译为JavaScript代码,如果是一些简单的工具库,直接使用tsc就可以完成构建的任务,不用再单独配置rollup等
"build:esm": "npx tsc -m es2015 --outDir dist/esm",
"build:cjs": "npx tsc -m commonjs --outDir dist/cjs",
"build:umd": "npx tsc -m umd --outDir dist/umd"
得到声明文件之后,也需要在package.json中声明
"types": "dist/xxx.d.ts"
业务代码可以依赖第三方包、我们开发的工具包当然也可以依赖第三方包,这也是npm生态繁荣的一大理由。
但是在打包的时候,我们不应该将第三方包的代码一起构建,下面将阐述具体的原因
首先是版本冲突的问题,比如业务项目依赖了Vue、你的工具包也依赖了Vue版本,如果工具包打包了一份版本不同的Vue,就会导致不可预期的错误和行为,用户也很难来解决一个项目里面有多个不同版本的包的问题,最终的结果只能是将这个冲突的包移除依赖列表(然后加入黑名单
其次,包的大小也是决定用户是否愿意安装这个包的原因之一,过大的包会占据更多的下载时间和磁盘空间,以及最终打包的业务代码体积变大。
因此,在打包时不应该讲第三方包的代码一起进行构建,要达到这个目的,可以配置rollup.config.js中的external选项
export default {
input: 'src/index.js', // 输入文件路径
output: [],
external: ['vue', 'vue-router'], // 外部依赖的列表
};
这样,在引入外部依赖的地方,还是会保留
import Vue from 'vue'
类似的代码,而不会替换成vue整个项目的代码。
在业务代码安装工具包时,会安装工具包package.json中声明的依赖列表,然后工具包就可以从node_modules自动找到对应的包,换言之,我们将工具包依赖的交给了业务方。
这会带来一个新的问题:如何保证业务方按照到工具包期望的依赖版本呢?比如业务方安装的是React14版本,而工具包只能在React16版本下工作时,强行安装就会导致node_modules里面出现两个不同大版本的Vue。
这个可以通过package.json中的peerDependencies指定包的对等依赖项来实现,即该包的用户也应该安装的其他包来声明你的包对于业务环境所需的依赖关系,帮助用户了解并安装正确的依赖版本,以确保你的包与宿主环境协同工作。
{
"name": "xxx",
"version": "1.0.0",
"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
}
此外还有一些需要注意的点
不要在包中编写具有副作用的代码,一是ESM模块无法进行tree shaking、二是副作用的代码往往无法考虑全部的边界情况,如SSR需要这个包同时运行在浏览器和Node中,如果依赖了端特定的接口,就会出问题。更好的处理办法是将副作用的代码封装在初始化函数中、或者提供相关的
覆盖率足够的测试用例、以及及时更新的文档,也是必不可少的
原文来自:https://www.shymean.com/article/开发npm包的一些注意事项
下面通过三种方法来搭建公司私有npm仓库,每种方式都有自己的优势。启动并配置服务、设置注册地址、登录cnpm、包上传到私有仓库、查看预览包、通过verdaccio搭建....
webpack:解析js文件,无法解析的文件需要借助loader,npm插件发布(vue&webpack&单页面):npm init =>package.json,创建.vue文件 =>插件界面及功能,index.js =>入口文件
NPM是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。这篇文章整理NPM常用的一些命令
直接通过&&连接多条命令,在npm run start的时候,发现只停留在第一个命令执行监听,后面的命令都没有执行。只能通过打开多个窗口分别执行多条命令,那么有没有办法实现一条npm命令执行多条监听呢?
npm和bower太像了,就像一对孪生兄弟…… npm的文件是package.json,包安装的目录是node_modules。 bower的文件是bower.json,包安装的目录是bower_components。使用命令也基本一致
这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx,根据传递参数xxx来判定不同的环境,给出不同的域名配置,具体内容详情大家参考下:config文件夹下dev.env.js中修改代码、prod.env.js中修改代码 HOST为截取到的参数
使用node.js和npm,在安装模块的时候报错npm WARN saveError ENOENT: no such file or directory, open ...的解决办法。这个原因就是因为项目没有进行初始化,缺少package.json文件造成的。需要package.json才能npm install。 可以npm init初始化生成一个package.json。
抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题,之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的修改,但升级到 vue-cli 3.x 之后,反而一脸懵逼
如果您曾在 Node 或 JavaScript 前端开发中投入过时间和精力,那么您就知道 npm 中有数以十万计的模块可供您选择。挑选模块可能很难,但您只需要一些方法点来解决它。当您正在为如何抉择浪费时间,或者甚至不知道从哪里开始时,请使用本指南来帮助您。
关于 npm run eject 报错的问题,昨天新开React的项目, 刚刚一上手就碰到问题,解决方法(前提你有git).出错的原因:应该是git没有安装好,或者代码没有提交上git
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!