2023-03-12-【工程化】脚手架搭建手册

项目初始化

• 初始化 package.json npm init
  字段说明

{
  "name": "sun-arms",
  "version": "1.0.0",
  "description": "lint & tools",
  // main 字段的值是入口文件,即使不包括在 files 字段里，也会被打包。
  "main": "index.js",
  // files 字段值的类型是字符串数组,数组里面的字符串填写需要发布到 NPM 的文件名。当然也可以在根目录下创建 .npmignore 文件，把不需要上传到 NPM 的文件名填进去。不过有些文件或者目录比如, README.md 或者 LICENSE.md 是默认就会被打包。也有默认不会被打包的目录或者文件，比如, node_modules 或者 .git。
  "files": [
    "dist",
    ...
  ],
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zhangyingxuan/sun-arms.git"
  },
  "author": "zhangyingxuan",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/zhangyingxuan/sun-arms/issues"
  },
  "homepage": "https://github.com/zhangyingxuan/sun-arms#readme",
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
  },
  // browser 当需要打包多个版本时，设置 browser 字段，可以根据浏览器的不同环境变量，使用不同的版本
  // unpkg 提供一个给 UNPKG, 用于支持 CDN 服务，有点类似 browser
  // module 若项目中有封装模块，可以设置 module, 也就是设置一个模块的入口, 该字段目前比较前卫
  // typings/types TypeScript 解析文件的入口, 该文件会被发布到 NPM, 并且可以被下载，为用户提供更加好的 IDE 支持。
  // bin 若项目中包含一些可执行文件，可以把文件名在 bin 字段下, 当只有一个 Node.js 文件入口时, 可以是 string 值，当有多个的时候,可以用键值对的形式写。不过要执行这些文件，需要在文件头部加上 #!/usr/bin/env node
  // man 若需要提供命令行输出文档，可以用 man 字段指明,当只有一个文件时, 可以是一个字符串值, 当有多个文件时, 可以是一个字符串数组。
  // peerDependencies NPM v3开始，peerDependencies 字段需要自己配置，用于指定一个兼容项目的依赖，该字段的值是一个对象，对象的 key 是兼容包的名称，对象的值是该包的指定版本。
  // optionalDependencies 字段用于设置一些项目中的可选包，这些包不一定要下载，但是却很有用，设置在该字段下后，对应的包只会在需要的时候被下载，比如 fsevents 模块，尽在 mac 下有效。
  // bundledDependencies 字段是一个字符串数组，数组元素是需要跟最终包一起打包出去的依赖名称。
}

添加 .gitignore

.DS_Store
node_modules
**/*/dist
**/*/es
**/*/lib
!**/sites/**/site/lib
# local env files
.env.local
.env.*.local
.idea
temp

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Editor directories and files
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# release packages
*.zip
*.gz
*.tar

初始化 lint

参考 2022-04-17-【工程化】vue3-vite4-ts配置eslint、stylelint、prettier

初始化 husky、commitlint

参考 2022-04-17-【工程化】vue3-vite4-ts配置husky、pre-commit

rollup 模块打包

参考文献

• 安装依赖

pnpm install rollup --save-dev
pnpm install @rollup/plugin-commonjs  --save-dev
pnpm install rollup --save-dev

• 说明：@rollup/plugin-commonjs 支持依赖包转换为es模块化标准。 convert node_modules library to an ES module

• 配置打包指令

"dev": "rollup -i src/main.js -o dist/bundle.js -f es"

-i指定要打包的文件，-i是–input的缩写。
src/index.js是-i的参数，即打包入口文件。
-o指定输出的文件，是–output.file或–file的缩写。(如果没有这个参数，则直接输出到控制台)
dist/bundle.js是-o的参数，即输出文件。
-f指定打包文件的格式，-f是–format的缩写。
es是-f的参数，表示打包文件使用ES6模块规范。
rollup支持的打包文件的格式有amd, cjs, es\esm, iife, umd。其中，amd为AMD标准，cjs为CommonJS标准，esm\es为ES模块标准，iife 为立即调用函数， umd同时支持amd、cjs和iife。

多指令执行

pnpm install npm-run-all -D