提高生产力--让项目配置变为自己专属的脚手架

背景

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

本文目的

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

脚手架编写

工具

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

步骤

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

CLI代码

代码不贴了，可以到 create-repo-cli : https://github.com/LuckyWinty/create-repo-cli 参考

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

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

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

webpack-merge

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

代码语言：javascript复制

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

copy-webpack-plugin

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

代码语言：javascript复制

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.

代码语言：javascript复制

const MiniCssExtractPlugin = require('mini-css-extract-plugin')new MiniCssExtractPlugin({    filename: 'chunk.[name].[contenthash:8].css',
  }),

friendly-errors-webpack-plugin

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

代码语言：javascript复制

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')new FriendlyErrorsWebpackPlugin(),

happypack

进行多线程构建，提高构建速度

代码语言：javascript复制

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消耗的时间，可以通过看消耗的时间来针对性地进行一些优化...

代码语言：javascript复制

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了：

代码语言：javascript复制

//.eslintrc.jsmodule.exports = {    extends: ['eslint-config-airbnb'],
}

Commitlint

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

代码语言：javascript复制

//package.json"pre-commit": [    "lint"
  ],  "husky": {    "hooks": {      "commit-msg": "commitlint -e .git/COMMIT_EDITMSG"
    }
  }//commitlint.config.jsmodule.exports = {  extends: ['@commitlint/config-conventional'],  rules: {    'scope-empty': [0],
  },
}

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

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

附使用指南及对应代码

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

code link

create-repo-cli : https://github.com/LuckyWinty/create-repo-cli
webpack-project-template : https://github.com/LuckyWinty/webpack-project-template
rollup-project-template : https://github.com/LuckyWinty/rollup-project-template

webpack javascript 打包 rollup.js https

0 人点赞