服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - 手摸手学会搭建一个 TS+Rollup 的初始开发环境

手摸手学会搭建一个 TS+Rollup 的初始开发环境

2021-11-12 22:25DYBOY 编程技术

目前市面上有许多 CLI 工具用于快速初始化构建一个项目。例如:tsdx、create-react-app,对于一些个人小项目来说实在是显得又有些臃肿,如果抛开这些 CLI 工具,自己手动从 0 到 1 手动搭建一个小而美的 NPM 包开发环境需要做哪些工作

手摸手学会搭建一个 TS+Rollup 的初始开发环境

目前市面上有许多 CLI 工具用于快速初始化构建一个项目。例如:tsdx、create-react-app,对于一些个人小项目来说实在是显得又有些臃肿,如果抛开这些 CLI 工具,自己手动从 0 到 1 手动搭建一个小而美的 NPM 包开发环境需要做哪些工作?不妨一起动手试一下!

首先是我们的项目预期:

  1. 实现一个 Javascript 工具函数库
  2. 支持 Typescript
  3. 团队协作 commit message 格式约束
  4. Prettier 代码格式化,ESlint 校验
  5. 发包前自动升级版本并构建

打包构建工具采用 Rollup[1]。

一、构建基本文件结构

首先就是需要设计并搭建项目的文件结构,并初始化一个 package.json 文件,用于描述当前项目的功能。

  1. mkdir dyboy-npm-ts-template
  2. cd dyboy-npm-ts-template
  3. touch index.ts
  4. npm init -y

二、初始化 Typescript 环境

可以看到我们的入口文件 ./index.ts 是 Typescript 类型,最重要的是我们需要打包给用户,以支持在 TS 环境下的代码提示,有助于提升研发效率

  1. yarn add typescript -D

然后初始化快速生成一个 tsconfig.json 文件,该文件属于 Typescript 的配置文件

  1. tsc --init

默认的 tsconfig.json 配置需要修改,以支持我们能够编译成 ES 模块。

简单修改后,符合需求的 tsconfig.json 配置以及目录结构如下:

手摸手学会搭建一个 TS+Rollup 的初始开发环境

这样配置好后,Typescript 在编译过程中会向 ./dist 目录输出 index.d.ts 的类型声明文件

同时需要将 package.json 文件中修改/新增;

  1. - "main": "index.js",
  2. + "main": "./dist/index.cjs.js",
  3. + "module": "./dist/index.esm.js",
  4. + "types": "./dist/index.d.ts",
  5. + "files": [
  6. + "dist"
  7. + ],

files 字段是用于约定在发包的时候NPM 会发布包含的文件和文件夹。

注意: files 字段中文件夹名直接写名字,不要包含 ./ 字符,否则打包出来的产物不会包含该文件夹。

到这一步,就可以流畅编写 Typescript 文件

index.ts 文件内容:

  1. const func = () => {
  2. // TODO: coding...
  3. };
  4. export { func };

鼠标放函数 func 上面也有了类型提示,表示 Typescript 开发环境已经 OK

三、Git 初始化

代码存在本地,但为了更好的代码版本管理/备份,将使用 Git 工具并和远程仓库关联起来。

首先初始化项目的 git

  1. git init

新建一个 .gitignore 文件,用于忽略那些不需要存入 Git 版本的文件或文件夹,并补充写入规则如下:

  1. node_modules/
  2. dist/
  3. .DS_Store
  4. .yarn-error.log

四、初始化 Rollup 打包环境

因为我们发布 NPM 包,所以需要一个小巧精致的构建工具,自然是选择 Rollup 来作为打包工具,Rollup 较好地支持 tree shaking,使得打包出来的包体积更小。

4.1 安装依赖:

  1. yarn add rollup -D
  2. yarn add @rollup/plugin-typescript -D
  3. yarn add @rollup/plugin-node-resolve -D
  4. yarn add @rollup/plugin-commonjs -D

安装了 rollup,以及支持 TS、处理路径和 commonjs 的插件

4.2 配置 rollup.config.js

初始化的配置如下

  1. import resolve from '@rollup/plugin-node-resolve';
  2. import typescript from '@rollup/plugin-typescript';
  3. import commonjs from '@rollup/plugin-commonjs';
  4. export default [
  5. {
  6. input: './src/index.ts',
  7. output: {
  8. dir: 'dist',
  9. format: 'cjs',
  10. entryFileNames: '[name].cjs.js',
  11. },
  12. plugins: [resolve(), commonjs(), typescript()],
  13. }, {
  14. input: './src/index.ts',
  15. output: {
  16. dir: 'dist',
  17. format: 'esm',
  18. entryFileNames: '[name].esm.js',
  19. },
  20. plugins: [resolve(), commonjs(), typescript()],
  21. }
  22. ];

可以同时生成支持 CommonJS 和 ESModule 的文件,在前面 tsconfig.json 配置下还会生成 index.d.ts 文件用于指明类型声明。

4.3 修改 scripts

来到 package.json 文件中,为了使用快捷指令,以及调用 rollup 作为开发的预览功能,需要配置 scripts 字段如下:

  1. "scripts": {
  2. + "dev": "rollup -w -c",
  3. + "build": "rollup -c"
  4. - "test": "echo \"Error: run tests from root\" && exit 1"
  5. },

如此,我们便可以通过 yarn dev,就能在开发的时候实时编译。

如果需要打包,则先执行 yarn build 命令即可完成打包。

五、ESlint 配置

如果是小团队协作开发,就会涉及到代码规范问题,换个角度,如果是开源的产品,有人提 MR 的时候,我们会希望他的代码风格是比较符合我们一些预期的,因此将在项目中引入 ESlint。

先安装 eslint 开发环境依赖

  1. yarn add eslint -D

然后可以使用刚安装好的 eslint 初始化一个配置文件:

  1. ./node_modules/.bin/eslint --init

手摸手学会搭建一个 TS+Rollup 的初始开发环境

这样在项目的根目录就有一个 .eslintrc.json 配置文件,

然后可以根据自己的需要去修改 ESlint 的一些规则,笔者配置好的规则内容如下:

  1. {
  2. "env": {
  3. "browser": true,
  4. "commonjs": true,
  5. "es2021": true
  6. },
  7. "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  8. "parser": "@typescript-eslint/parser",
  9. "parserOptions": {
  10. "ecmaVersion": 8
  11. },
  12. "plugins": ["@typescript-eslint"],
  13. "rules": {
  14. "@typescript-eslint/no-unused-vars": [
  15. "error",
  16. {
  17. "varsIgnorePattern": "^_"
  18. }
  19. ],
  20. "no-unused-vars": "off",
  21. "no-console": "warn",
  22. "space-before-function-paren": "warn",
  23. "semi": "warn",
  24. "quotes": ["warn", "single"]
  25. }
  26. }

六、Prettier 代码自动格式化

前端开发项目中会涉及到一些代码格式问题,比如函数括号后空格,CSS 格式,因此可以借助 Prettier 三方工具来实现团队代码的自动统一。

安装 prettier

  1. yarn add prettier -D

然后新建一个 .prettierrc.json 的配置文件,内容如下:

  1. {
  2. "printWidth": 100, //单行长度
  3. "tabWidth": 2, //缩进长度
  4. "useTabs": false, //使用空格代替tab缩进
  5. "semi": true, //句末使用分号
  6. "singleQuote": true, //使用单引号
  7. "bracketSpacing": true, //在对象前后添加空格-eg: { foo: bar }
  8. "arrowParens": "avoid" //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  9. }

更多使用规则可以参考:Configuration File[2]

开发者可以通过快捷键 Shift + Commond + F 来实现当前文件的格式化排版。

七、Husky Git 提交约束

当然除了手动格式化,如果开发者没有格式化就提交代码到远程了怎么办,为此,引入 Husky 作为 Git commit 提交前做一个自动格式化暂存区内的文件,以及校验是否符合 Eslint 规则。

与此同时,还需要将用户的 git commit message 规范,可以引入 commitlint 工具,用于校验提交的 message 格式是否符合规范

具体的规范可以参考:Conventional Commits[3]

首先安装开发环境依赖:

  1. yarn add husky@3.1.0 -D
  2. yarn add lint-staged -D
  3. yarn add @commitlint/cli -D
  4. yarn add @commitlint/config-conventional -D

然后在 package.json 文件中新增如下内容:

  1. "husky": {
  2. "hooks": {
  3. "pre-commit": "lint-staged",
  4. "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  5. }
  6. },
  7. "commitlint": {
  8. "extends": [
  9. "@commitlint/config-conventional"
  10. ]
  11. },
  12. "lint-staged": {
  13. "*.{ts,js}": [
  14. "node --max_old_space_size=8192 ./node_modules/.bin/prettier -w",
  15. "node --max_old_space_size=8192 ./node_modules/.bin/eslint --fix --color",
  16. "git add"
  17. ]
  18. },

这样配置好了后,开发者在 git commit 时,会首先调用 lint-staged 字段中命令,首先是 prettier 格式化,然后是 ESlint 校验并修复,然后将修改后的文件存入暂存区。

然后是校验 commit message 是否符合规范,符合规范后才会成功 commit。

八、预发包前升级版本并构建

为了实现快捷发包,可以在 package.json 文件的 scripts 字段添加快捷命令,用于规范发包。

添加如下命令,可以在发包(执行 npm publish 命令)之前首先会提示升级包本本,然后 build 构建出产物

  1. "prepublish": "yarn version && yarn build"

九、完成初始化

由于是开源库,所以咱把 package.json -> license 字段的值改为 MIT,可以参考:什么是MIT 协议[4] 。

初始化的收尾工作就是将当前的变动存入 Git 记录中并关联远程仓库。

Git 远程同名仓库的创建就不赘述了,可以参考:创建仓库 - Github Docs[5]

然后我们将本地的代码 staged 并 commit

  1. git add -A
  2. git commit -m "feat: init"

关联远程仓库并将本地代码提交到远程仓库:

  1. git remote add origin "https://xxxx.com/xx/xx.git"
  2. git push -u origin master

此后,我们可以把当前仓库作为一个开发支持 Typescript 的 NPM 包的模板仓库,后续开发新的 NPM 包,只需要克隆当前模板,然后再根据需要修改配置,新增 rollup 编译插件等就可以啦!

总结

梳理了在初始化构建一个工程项目中需要做的事情,涉及打包构建、开发、Git、发包的内容,从 0 到 1 愉快地完成了项目的初始化,后续就可以更加愉快地开发了。

TODO: 可以发现这种项目初始环境既然是相同的,可以赋予它模板的概念,那么是不是可以再动手写一个属于自己团队的开发脚手架(CLI),用于初始化项目?

原文链接:https://mp.weixin.qq.com/s/BN-zEcfqQX0UFpX9Ae9ApQ

延伸 · 阅读

精彩推荐