Init project
JS 项目工程化配置
Git
初始化仓库,新建配置文件
git init
.gitignore
配置文件
node_modules/
_book/
*.zip
buil/
dist/
Node
nvm
配置node 版本 .nvmrc
# .nvmrc
v10.24.1
nvm install
nvm use
NPM
.npmrc
# .npmrc
# @myscope:registry=https://mycustomregistry.example.org
registry="https://registry.npm.taobao.org/"
npm init # 创建 packge.json 文件
Eslint
配置文件:
.eslintrc.json
.eslintignore
npm i -D eslint # 全局安装也ok
npx eslint --init # 创建eslint 配置文件
// eslintignore
node_modules/
_book/
*.zip
Prettier 格式化
.prettierrc.json
.prettierignore
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier
// perttierrc.json
{"printWidth":100,"tabWidth":2,"useTabs":false,"singleQuote":true,"jsxBracketSameLine":true,"arrowParens":"avoid","semi":true,"trailingComma":"es5"}
// eslintrc
{
"extends": [
"some-other-config-you-use",
"prettier"
]
}
Husky
npx husky-init && npm install # npm
npx husky add .husky/pre-commit 'echo pre-commit hook '
编辑 .husky
文件夹下相应的文件 编写自定义脚本文件实现 commit 前 lint 格式化 代码
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged # 执行 lint-stagedrc 配置文件
Lint-staged
npx mrm@2 lint-staged
创建.lintstagedrc.json
配置文件
{
"*.{ts,js}": "eslint --cache --fix",
"*.{ts,js,css,md,json,html}": "prettier --write"
}
Git-cz & commitizen
npm install -D git-cz commitizen
package.json
添加配置
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
执行 git commit
的时候替换为 npx git-cz
TypeScript
安装
npm install typescript --save-dev
# Base tsconfig
npm install --save-dev @tsconfig/recommended
npm install --save-dev @tsconfig/node16
# node type
npm i @types/node
tsconfig.json
创建配置文件npx tsc --init
tsconfig.json 参考
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
"lib": ["DOM", "ESNext"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
// "jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
/* Modules */
"module": "nodenext" /* Specify what module code is generated. */,
// "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
"baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
/* JavaScript Support */
"allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
"checkJs": true /* Enable error reporting in type-checked JavaScript files. */,
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
/* Emit */
"declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
"outDir": "./build" /* Specify an output folder for all emitted files. */,
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"strict": true /* Enable all strict type-checking options. */,
"skipLibCheck": true /* Skip type checking all .d.ts files. */
},
"extends": "@tsconfig/node16/tsconfig.json",
"include": ["app/**/*"],
"exclude": ["node_modules", "**/*.spec.ts", "build/", "debug"]
}
Refer
Unit-test
Github actions
Travis
jest