作为一名远程工作者,我并不能保证100%的电源供应,就目前的经验来看,我大约有30%的时间靠电池工作。所以我对能耗也比较敏感,把 eslint 和单元测试(mocha)放在 webpack 里做热加载,我觉得实在没什么必要,还是单独写单独跑吧。
查看 mocha-webpack 的 README,它对自己的介绍是:mocha-webpack 基本上等效于 $ webpack test.js output.js && mocha output.js
命令的封装,但是更高效、更强大。
让我们忽略后半句,先不去研究它高效和强大在什么地方,只看前半句。如果本质如此的话,那就不复杂,我只要写一个 webpack 配置文件生成所有的测试,然后跑这些测试就行了。最终方案:
- 一个入口文件,
import
所有测试文件 - 用 webpack 打包入口文件,忽略掉不需要测试的内容(比如 CSS)
- 跑这个测试
- 平时写测试随便改下
import
路径就行了
测试文件多而杂,一个一个 import
太麻烦,可以写一个脚本帮我们:
test/index.jsconst context = require.context('.', true, /.+\.test\.js?$/); context.keys().forEach(context); module.exports = context;
然后配合这样的配置文件即可:
webpack.config.mocha.jsconst path = require('path'); const nodeExternals = require('webpack-node-externals'); const {resolve} = require('./webpack.base.config'); resolve.alias.test = path.resolve(__dirname, '../test'); const config = { target: 'node', entry: 'test/index.js', output: { path: path.resolve(__dirname, '../dist'), filename: 'test.build.js', }, externals: [nodeExternals()], module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { cacheDirectory: true, }, }, ], }, { test: /\.ya?ml$/, use: [ 'json-loader', 'yaml-loader', ], exclude: /node_modules/ }, { test: /\.(css|styl)$/, loader: 'null-loader', }, { test: /\.(png|jpg|gif|svg|woff2|eot|woff|ttf|ico)$/, loader: 'null-loader', }, { test: /\.pug$/, loader: 'pug-plain-loader', }, ], }, mode: 'none', resolve, }; module.exports = config;
执行的时候,直接用 shell 脚本来跑就行。
欢迎吐槽,共同进步