给本身搭个脚手架

背景

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

本文目的

• 提升生产力，将一些可复用的东西复用起来
• 动手作一个本身的脚手架，熟悉构建配置，熟悉脚手架开发

脚手架编写

工具

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

步骤

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

代码

代码不贴了，能够到 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

1. create-repo init [project-name]
2. choose webpack template type
3. run yarn && yarn start

create rollup project

1. create-repo init
2. choose rollup template type
3. run yarn
4. cd src/[component-name]
5. run yarn start

code

• create-repo-cli
• webpack-project-template
• rollup-project-template

最后

• 了解更多内容，欢迎关注个人blog, 给我个star～
• 以为内容有帮助能够关注下个人公众号 「前端Q」，一块儿学习成长～～