给自己搭个脚手架

背景

想做个测试或者某个东西的demo，需要新建一个项目。如果从 0 开始，要配置一大堆东西，耗时长；如果直接用现在流行的一些脚手架，如vue-cli等，黑箱操作，你需要阅读文档，也很难全局看清里面到底有哪些内容…
在某个项目里，新建一个组件，其实有些固定的文件都要建，如xxx.js,xxx.html,xxx.css，更有可能有些固定内容，需要手工复制过来…
平时做的项目都是在架子里面堆砌内容，没试过构建等内容的配置…
本文目的

提高生产力，将一些可复用的东西复用起来
动手做一个自己的脚手架，熟悉构建配置，熟悉脚手架开发
脚手架编写

工具

commander 命令编写，如 init
chalk 让输出带颜色
download-git-repo，下载模版
inquirer 命令行交互，获取用户输入
ora 进度条
log-symbols 输出一些标志，如√
handlebars 模板引擎，更复杂或高级点的可以用 metalsmith 配合操作
步骤

执行 init 命令
于用户交互，让用户输入项目描述、作者等信息
根据用户输入，下载对应的模板文件
根据用户输入的信息替换模板文件的对应内容
完成
代码

代码不贴了，可以到 create-repo-cli 参考

以webpack为构建工具的常见项目配置

注意：所有构建类相关的都应该安装到 devDependencies 下，即安装时加上 --save-dev

webpack

这里就不一一列出所有功能的配置了，只写一些优化类的配置。想知道所有配置的，可以直接移步到 webpack-project-template

webpack-merge
将开发环境、生产环境、ssr的配置分开文件写，易于维护。将共同的部分抽离出来，再通过 webpack-merge来merge抽离出来的部分。例：

const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const dev = {...}
module.exports = merge(base, dev)
复制代码

copy-webpack-plugin
将单个文件或整个目录复制到构建目录。适合用于拷贝一些静态资源，如图片等

const CopyPlugin = require('copy-webpack-plugin')
new CopyPlugin([
 { from: path.resolve(__dirname, 'public'), to: '../dist/public' }
 ]),
复制代码
```
mini-css-extract-plugin
将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap.

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
new MiniCssExtractPlugin({
filename: ‘chunk.[name].[contenthash:8].css’,
}),
复制代码

friendly-errors-webpack-plugin
Webpack 进行默认编译时会有很多无用的信息，需要进行清理，只显示少量信息，并便于排错。使用这个插件，可以帮助清理 console 的信息。也可以自定义错误处理回调等

`const FriendlyErrorsWebpackPlugin = require(‘friendly-errors-webpack-plugin’)
new FriendlyErrorsWebpackPlugin(),
复制代码

happypack
进行多线程构建，提高构建速度
`
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
new HappyPack({
 id: 'babel',
 loaders: ['cache-loader', 'babel-loader?cacheDirectory'],
 threadPool: happyThreadPool,
}),
复制代码
```
speed-measure-webpack-plugin
构建各路程的测速，如loader、plugin消耗的时间，可以通过看消耗的时间来针对性地进行一些优化...

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()
module.exports = smp.wrap(merge(base, dev))
复制代码

eslint

代码规范是必须的。这里用 eslint 也支持了检查 ts 类型，毕竟 tslint 已经停止维护了，且官方也推荐用 eslint 进行约束。业界有好几个挺标准的规范，如airbnb等。这里，我是继承了 eslint-config-airbnb 再进行一些小修改。如过直接使用，这样就OK了：

//.eslintrc.js
module.exports = {
 extends: ['eslint-config-airbnb'],
}
复制代码
```
Commitlint

统一规范 commit 格式，让 commit 信息整整齐齐的展示 安装 commitlint 、@commitlint/cli、@commitlint/config-conventional

//package.json
“pre-commit”: [
“lint”
],
“husky”: {
“hooks”: {
“commit-msg”: “commitlint -e .git/COMMIT_EDITMSG”
}
}
//commitlint.config.js
module.exports = {
extends: [’@commitlint/config-conventional’],
rules: {
‘scope-empty’: [0],
},
}
复制代码

以rollup为构建工具的常见项目配置

rollup 就是适用于做工具库。其用到的配置，在功能上，其实与 webpack 差不多。具体配置就不详细说了。想了解的可以看 rollup-project-template

附使用指南及对应代码

create-repo-cli

A cli to create project quickly...

install global

sudo npm install create-repo-cli -g

create webpack project

create-repo init [project-name]
choose webpack template type
run yarn && yarn start
create rollup project

create-repo init
choose rollup template type
run yarn
cd src/[component-name]
run yarn start

最后

分享移动开发与微信小程序开发该做哪些！其中有哪些关键的技术点！需要下图学习教程的欢迎加入web前端交流群：854591759获取！
点击链接加入群聊【web前端交流群】：