server
、 build
和 test
三个命令,分别用于本地调试和构建css modules
还提供了 JSON
格式的配置方式。
$ npm i roadhog -g
mkdir zhufeng_roadhog
cd zhufeng_roadhog
cnpm init -y
cnpm i react react-dom -S
src/index.js
,编译后会放置到 dist\index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>hello</h1>,document.getElementById('root'));
public
目录也是静态文件根目录public\index.html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
src\sum.js
module.exports = function (a, b) {
return a + b;
}
test\sum.test.js
let sum = require('../src/sum');
describe('sum', function () {
it('1+2=3', function () {
expect(sum(1, 2)).toBe(3);
});
});
$ roadhog server
$ roadhog build
npx jest --init
jest.config.js
module.exports = {
testEnvironment: "jsdom",
testURL: "http://localhost"
}
$ roadhog test
"scripts": {
"dev": "roadhog server",
"build": "roadhog build",
"test": "roadhog test"
}
roadhog server
的自动重启.roadhogrc
文件中(如果你不喜欢 JSON 配置,可以用 .roadhogrc.js 以 JS 的方式编写,支持 ES6){
"entry": "src/index.js",
"disableCSSModules": false,
"publicPath": "/",
"outputPath": "./dist",
"extraBabelPlugins": [],
"extraPostCSSPlugins": [],
"autoprefixer": null,
"proxy": null,
"externals": null,
"library": null,
"libraryTarget": "var",
"multipage": false,
"define": null,
"env": null,
"theme": null,
}
参数 | 含义 |
---|---|
entry | 指定 webpack 入口文件,支持 glob 格式 |
outputPath | 配置输出路径,默认是 ./dist |
disableCSSModules | 禁用 CSS Modules |
publicPath | 配置生产环境的 publicPath,开发环境下永远为 / |
extraBabelPlugins | 配置额外的 babel plugin。babel plugin 只能添加,不允许覆盖和删除 |
extraPostCSSPlugins | 配置额外的 postcss 插件 |
autoprefixer | 配置 autoprefixer 参数 |
proxy | 配置代理 |
externals | 配置 webpack 的 externals 属性 |
library | 配置 webpack 的 library 属性 |
libraryTarget | 配置 webpack 的 libraryTarget 属性 |
multipage | 配置是否多页应用。多页应用会自动提取公共部分为 common.js 和 common.css |
define | 配置 webpack 的 DefinePlugin 插件,define 的值会自动做 JSON.stringify 处理 |
env | 针对特定的环境进行配置。server 的环境变量是 development,build 的环境变量是 production |
theme | 配置主题,实际上是配 less 的 modifyVars |
export default {
// Support type as Object and Array
'GET /api/users': { users: [1,2] },
// Method like GET or POST can be omitted
'GET /api/users/1': { id: 1 },
// Support for custom functions, the API is the same as express@4
'POST /api/users/create': (req, res) => { res.end('OK'); },
};
mkdir zfroadhog
cd zfroadhog
cnpm init -y
cnpm i chalk cross-spawn webpack -S
{
+ "bin": {
+ "zfroadhog": "./bin/zfroadhog.js"
+ },
}
bin\roadhog.js
#!/usr/bin/env node
const spawn = require('cross-spawn');
const chalk = require('chalk');
const script = process.argv[2];
//node bin/roadhog.js -v
switch (script) {
case "-v":
case "--version":
console.log(require("../package.json").version);
break;
case "build":
case "server":
result = spawn.sync(
"node",
[require.resolve(`../lib/${script}`)],
{ stdio: "inherit" }
);
process.exit(result.status);
break;
default:
console.log(`Unknown script ${chalk.cyan(script)}.`);
break;
}
lib\build.js
const webpack = require("webpack");
const chalk = require("chalk");
function doneHandler(err, stats) {
console.log(stats.toJson().assets);
}
function build() {
let config = require("./config/webpack.config.prod");
var compiler = webpack(config);
compiler.run(doneHandler);
}
build();
lib\config\webpack.config.prod.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve('dist'),
filename: "[name].js"
}
};