architect-plan/ ├── src/ │ ├── test/ │ │ └── index.ts │ └── index.ts ├── dist/ │ └── bundle.js │ └── bundle.js.map └── index.html └── package.json └── rollup.config.js └── tsconfig.json
🚫禁止使用Webpack
🪜渐进式学习工程化
- 安装包管理工具 pnpm
brew install pnpm
pnpm config get registry
查看pnpm的配置：源 默认https://registry.npmjs.org/
pnpm config set registry https://registry.npmmirror.com
切换为淘宝镜像源
- 初始化项目
npm init -y
📦使用Rollup打包
yarn add rollup
👮使用TypeScript，加入类型系统
yarn add @rollup/plugin-typescript typescript tslib
🌲启用摇钱树，减少代码输出
yarn add rollup-plugin-terser
- 使用摇钱树的前提：使用 ESModule 模块语法
- 更新rollup.config.js
👗启用Prettier
代码格式化，更美丽
- install
yarn add --dev --exact prettier
- create empty prettierrc
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
- create empty prettierignore
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
🚫🚫🚫 Never use ESLint it is a bullshit
📦切换为包管理工具pnpm
删除/node_modules、yarn.lock 和 dist后，重新安装依赖库pnpm install
出现一个问题:
tsconfig.json文件抛红
找不到“estree”的类型定义文件。
程序包含该文件是因为:
隐式类型库 "estree" 的入口点ts
找不到“node”的类型定义文件。
程序包含该文件是因为:
隐式类型库 "node" 的入口点ts
解决办法
pnpm add -D @types/estree @types/node
原因：
tsconfig文件没有正确配置。使用某些包管理器时，这个问题浮出了水面
* 更新tsconfig.json
我从devDependence中删除了@types/estree和@types/node
他们是无辜的，不需要被引入
🎍启用实验性质的特性：装饰器
🚀切换为SWC编译器
不使用tsc编译器，使用swc编译器
- install
pnpm add @rollup/plugin-swc @swc/core
-
关闭ts，启用swc 更新tsconfig.json
更新rollup.config.js -
使用swc编译，使用ts检查类型 更新package.json
🚏🚉🚉里程碑
在途中解决了一个又一个问题
我们终于可以稍作休息🍵
- 将本地项目初始化为git仓库
git init
- touch and configure .gitignore
node_modules/
dist/
*.log
*.env
- push to github
git add .
git commit -m "HappyBundler"
... 在github上创建了一个仓库，名为architect-plan-a ...
git remote add origin git@github.com:renshuai0642/architect-plan-a.git
git branch -M main
git push -u origin main
- create and push tag
git tag -a v1.0.0 -m "rollup to bundle, ts to check type and emit .d.ts, swc to compile from .ts to .js"
git push --tag
// 一次性将所有本地tag推到云上，这里我就建了一个tag，所以用这个命令很ok
- 登录github 去瞅瞅