给自己搭个脚手架

7,333 阅读4分钟

背景

  • 想做个测试或者某个东西的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

最后

  • 了解更多内容,欢迎关注我的blog, 给我个star~
  • 觉得内容有帮助可以关注下我的公众号 「前端Q」,一起学习成长~~
    GitHub