Skip to content

Latest commit

 

History

History
168 lines (131 loc) · 5.82 KB

给自己搭个脚手架.md

File metadata and controls

168 lines (131 loc) · 5.82 KB
Raw

背景

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