目前市面上有很多CLI工具可以快速初始化和搭建项目。比如：tsdx，create-react-app，对于一些个人的小项目来说，显得有些臃肿。如果你抛开这些CLI工具，从0到1手动搭建一个小而美的NPM包开发环境，你需要做什么？工作？一起来试试吧！首先，我们的项目期望：实现一个Javascript工具函数库，支持Typescript团队协作，commit消息格式约束，Prettier代码格式化，ESlint验证，包发布前自动版本升级，构建包。构建工具采用Rollup[1]。1.构建基本文件结构首先需要设计构建项目的文件结构，并初始化一个package.json文件来描述当前项目的功能。mkdirdyboy-npm-ts-templatecddyboy-npm-ts-templatetouchindex.tsnpminit-y2.初始化Typescript环境。你可以看到我们的条目文件。/index.ts是Typescript类型。最重要的是我们需要打包给用户，支持TS环境下的Codehints帮助提高研发效率yarnaddtypescript-D然后初始化快速生成一个tsconfig.json文件，属于Typescript配置文件tsc--init需要修改默认的tsconfig.json配置，以支持我们可以编译成ES模块。简单修改后，满足要求的tsconfig.json配置和目录结构如下：经过这个配置，Typescript在编译过程中会输出index.d.ts的类型声明文件到./dist目录下，需要将package.json文件添加到Modify/Add;-"main":"index.js",+"main":"./dist/index.cjs.js",+"module":"./dist/index.esm.js",+"types":"./dist/index.d.ts",+"files":[+"dist"+],files字段用于约定npm发布包含的发送包裹时的文件和文件夹。注意：文件夹名称直接写在files栏中，不要包含./字符，否则打包后的产品不会包含该文件夹。至此，就可以顺利编写Typescript文件index.ts了。文件内容：constfunc=()=>{//TODO:coding...};export{func};鼠标函数func上还有类型提示，代表Typescript开发环境OK。3、Git初始化代码存在于本地，但是为了更好的代码版本管理/备份，会使用Git工具，关联远程仓库。首先初始化项目的gitinit，新建一个.gitignore文件，忽略Git版本中那些不需要存放的文件或文件夹，补充如下书写规则：node_modules/dist/.DS_Store.yarn-error.log4.初始化Rollup打包环境因为我们发布npm包，所以需要一个小巧玲珑的搭建工具。当然，我们选择Rollup作为打包工具。Rollup很好地支持treeshaking，使得打包后的包更小。4.1安装依赖：yarnaddrollup-Dyarnadd@rollup/plugin-typescript-Dyarnadd@rollup/plugin-node-resolve-Dyarnadd@rollup/plugin-commonjs-D安装的rollup，以及支持TS、处理路径和commonjs的插件4.2配置rollup.config.js初始化的配置如下./src/index.ts',output:{dir:'dist',format:'cjs',entryFileNames:'[name].cjs.js',},plugins:[resolve(),commonjs(),typescript()],},{input:'./src/index.ts',output:{dir:'dist',format:'esm',entryFileNames:'[name].esm.js',},plugins:[resolve(),commonjs(),typescript()],}];可以同时生成支持CommonJS和ESModule的文件，在之前的tsconfig.json配置下也会生成一个index.d.ts文件来表示类型声明。4.3修改scripts来到package.json文件，为了使用快捷命令和调用rollup作为开发预览功能，需要配置scripts字段如下："scripts":{+"dev":"rollup-w-c",+"build":"rollup-c"-"test":"echo\"Error:runtestsfromroot\"&&exit1"}，这样我们在开发的时候就可以使用yarndev实时编译了。如果需要打包，先执行yarnbuild命令完成打包。5.如果ESlint配置由小团队开发，会涉及到代码规范问题。从另一个角度来说，如果是开源产品，当有人提到MR时，我们会希望他的代码风格更符合我们的预期，所以项目中会引入ESlint。先安装eslint，开发环境依赖yarnaddeslint-D，然后可以使用新安装的eslint初始化一个配置文件：./node_modules/.bin/eslint--init这样就有了一个.eslintrc.json配置文件在项目的根目录下，然后可以根据自己的需要修改ESlint的一些规则。笔者配置的规则如下：{"env":{"browser":true,"commonjs":true,"es2021":true},"extends":["eslint:recommended","plugin:@typescript-eslint/recommended"],"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":8},"plugins":["@typescript-eslint"],"rules":{"@typescript-eslint/no-unused-vars":["error",{"varsIgnorePattern":"^_"}],"no-unused-vars":"off","no-console":"warn","space-before-function-paren":"warn","semi":"warn","quotes":["warn","single"]}}6.更漂亮的代码自动格式化前端开发项目会涉及到一些代码格式问题，比如函数括号后的空格，CSS格式，可以使用Prettierier三方工具实现团队代码自动统一安装prettieryarnaddprettier-D然后新建.prettierrc.json配置文件，内容如下：{"printWidth":100,//单行长度"tabWidth":2,//缩进长度"useTabs":false,//使用空格而不是制表符进行缩进"semi":true,//在句子末尾使用分号"singleQuote":true,//使用单引号"bracketSpacing":true,//在对象前后添加空格-eg:{foo:bar}"arrowParens":"avoid"//在单参数箭头函数参数周围使用括号-eg:(x)=>x}更多用法规则请参考：ConfigurationFile[2]Development用户可以使用快捷键Shift+Common+F实现对当前文件的格式化排版。7.HuskyGit提交约束当然，除了手动格式化，如果开发者提交代码到远程没有格式化怎么办。为此，引入Husky作为Gitcommit，在提交前在暂存区做一个自动格式化文件，检查是否符合Eslint规则。同时，用户的gitcommit消息规范也需要引入commitlint工具来验证提交的消息格式是否符合规范。具体规范可参考：ConventionalCommits[3]首先安装开发环境依赖：yarnaddhusky@3.1.0-Dyarnaddlint-staged-Dyarnadd@commitlint/cli-Dyarnadd@commitlint/config-conventional-D然后添加如下内容package.json文件中的内容："husky":{"hooks":{"pre-commit":"lint-staged","commit-msg":"commitlint-EHUSKY_GIT_PARAMS"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{ts,js}":["node--max_old_space_size=8192./node_modules/.bin/prettier-w","node--max_old_space_size=8192./node_modules/.bin/eslint--fix--color","gitadd"]}，这样配置后，开发者git时会先调用lint-staged字段中的命令commit，首先是prettier格式化，然后ESlint检查修复，然后将修改后的文件存入暂存区。然后检查commit消息是否符合规范，符合规范才提交成功。8.预发包前升级版本构建为了实现快速发包，可以在package.json文件的scripts字段中添加快捷命令，规范发包。添加如下命令，可以在发送包之前先提示升级包（执行npmpublish命令），然后build构建产品"prepublish":"yarnversion&&yarnbuild"9.完成初始化因为是开源的library，我们把package.json->license字段的值改成MIT，可以参考：什么是MITlicense[4]。初始化的点睛之笔是将当前的改动存储在Git记录中，并关联远程仓库。Git远程同名仓库的创建不再赘述。可以参考：创建仓库-GithubDocs[5]然后我们暂存本地代码，commitgitadd-Agitcommit-m"feat:init"关联远程仓库，将本地代码提交到远程仓库：gitremoteaddorigin"https://xxxx.com/xx/xx.git》gitpush-uoriginmaster之后，我们可以将当前仓库作为模板仓库，用于开发支持Typescript的npm包，然后开发新的npm包，只需要clone当前模板即可，以及然后根据需要修改配置，添加rollup编译插件等！总结整理一个工程项目初期搭建需要做的事情，涉及到打包构建、开发、Git、打包内容，从0到1愉快的完成项目的初始化之后，就可以开发更多的东西了未来快乐。TODO：可以发现，既然这个项目的初始环境是一样的，那么可以给它一个模板的概念，那么能不能自己写一个属于自己团队的开发脚手架（CLI）来初始化项目呢？
