你是如何开始一个我的项目呢?是基于以后技术栈提供的脚手架还是从 npm init 开始呢?
以前我没得选,必须面向搜索引擎。基于 webpack 或 rollup 来一步步构建我的项目,在开发过程中还有可能产生很多谬误。但当初我只想专一于以后业务,筛选适合的脚手架之后迅速构建本人的我的项目,这样的话,就能够把大量维护性的工作交给开源作者。
当然,出名的脚手架工具(Vue CLI,Umi,Vite 等)自不必说,这里我举荐几个棘手的工具。
microbundle-crl 专一于 React 组件的构建tsdx 专一于 TypeScript 库的构建crateApp 依据以后选项配置生成我的项目包 (多个根底构建工具 Webpack,Parcel,Snowpack)但无论是哪一个样板库或者脚手架,都不会完全符合以后业务的需要,开发者须要基于以后的样板进行批改。比如说须要在我的项目中要增加开源协定,批改项目名称,以及为我的项目增加不同的依赖。
从构建来说,目前有两个问题:
大量重复性操作如果生成我的项目的工作频率很高的话,例如一周写一个业务性组件。尽管每次在我的项目中要增加开源协定,批改项目名称,增加特定依赖都是一些小活,但频率高起来也是一件麻烦的事件。
底层依赖无奈间接降级如果开发者批改了以后样板,那么脚手架呈现破坏性更新时候就无奈间接降级(这种问题当然也比拟少)。尽管开发过程中会记录一些批改。但随着工夫的偏移,开发者不会确切晓得须要编辑或删除哪些文件能力使降级后的我的项目失常工作。
话不多说,咱们来看一看工具 Preset 是如何解决这一系列的问题的。
应用 Preset首先建设一个我的项目,以 vite 为例子,package.json 如下所示
{ "name": "vite-preset", "version": "0.0.1", "author": "jump-jump", "license": "MIT", "preset": "preset.ts", "prettier": { "printWidth": 80, "tabWidth": 2, "trailingComma": "all", "singleQuote": true, "arrowParens": "always", "useTabs": false, "semi": true }, "devDependencies": { "apply": "^0.2.15" }}执行上面的操作,咱们会的到 my-vue-app 文件。
# npm 6.xnpm init @vitejs/app my-vue-app --template vue拿到了以后命令生成的后果之后咱们把以后生成文件拷贝到 vite-preset 根目录下的 templates 中(即 templates/vite ) 文件夹下。
...