背景
本文目的
脚手架编写
工具
步骤
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 参考
将开发环境、生产环境、ssr的配置分开文件写,易于维护。将共同的部分抽离出来,再通过 webpack-merge
来merge抽离出来的部分。例:
const merge = require('webpack-merge')const base = require('./webpack.base.config')const dev = {...}module.exports = merge(base, dev)
将单个文件或整个目录复制到构建目录。适合用于拷贝一些静态资源,如图片等
const CopyPlugin = require('copy-webpack-plugin')new CopyPlugin([
{ from: path.resolve(__dirname, 'public'), to: '../dist/public' }
]),
将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap.
const MiniCssExtractPlugin = require('mini-css-extract-plugin')new MiniCssExtractPlugin({ filename: 'chunk.[name].[contenthash:8].css',
}),
Webpack 进行默认编译时会有很多无用的信息,需要进行清理,只显示少量信息,并便于排错。使用这个插件,可以帮助清理 console 的信息。也可以自定义错误处理回调等
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')new FriendlyErrorsWebpackPlugin(),
进行多线程构建,提高构建速度
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,
}),
构建各路程的测速,如loader、plugin消耗的时间,可以通过看消耗的时间来针对性地进行一些优化...
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')const smp = new SpeedMeasurePlugin()module.exports = smp.wrap(merge(base, dev))
代码规范是必须的。这里用 eslint 也支持了检查 ts 类型,毕竟 tslint 已经停止维护了,且官方也推荐用 eslint 进行约束。业界有好几个挺标准的规范,如airbnb等。这里,我是继承了 eslint-config-airbnb 再进行一些小修改。如果直接使用,这样就OK了:
//.eslintrc.jsmodule.exports = { extends: ['eslint-config-airbnb'],
}
统一规范 commit 格式,让 commit 信息整整齐齐的展示 安装 commitlint 、@commitlint/cli、@commitlint/config-conventional
//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
yarn && yarn start
yarn
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