我想构建一个在nodeJS和浏览器上既可运行又可测试的代码库。
我在这里用以下代码介绍了nodeJS环境，并尝试在浏览器中使用，所缺少的是如何使相同的文件与浏览器一起工作，以及单元测试（无需重复代码），同时还要注意传输问题使用babel和webpack。
- 运行浏览器+ NodeJS
- 单元测试browser + nodeJS
src / Vehicle.js
class Vehicle {
constructor() {
this.wheels = 4;
}
getWheels() {
return this.wheels;
}
}
module.exports = Vehicle;
// if (module != undefined) module.exports = Vehicle;
// if (window != undefined) window.Vehicle = Vehicle;
src / Truck.js
const Vehicle = require("./Vechicle");
class Truck extends Vehicle {
constructor() {
super();
wheels = 16;
}
}
module.exports = Truck;
webpack.config.js 这不起作用。 （既要缩小，又要缩小）
module.exports = {
module: {
entry: "src/**",output: {
filename: [
"../dist/bundle.min.js" // with sources maps
"../dist/bundle.js" // non minified
]
}
rules: [
{
test: /\.js$/,exclude: [/node_modules/,"test"],use: {
loader: "babel-loader"
}
}
]
}
};
测试（带有mocha的nodeJS）
test / VehicleTest.js
describe("Vehicle Test",function () {
const assert = require("assert");
it("should test Vehicle wheels",function () {
const Vehicle = require("../src/Vechicle");
let v = new Vehicle();
assert(v.getWheels() == 4);
});
});
test / TruckTest.js
describe("Truck Test",function () {
const assert = require("assert");
it("should test Truck Wheels",function () {
const Truck = require("../src/Truck");
let t = new Truck();
assert(t.getWheels() == 16);
});
});
测试（浏览器）
test / index.html 浏览器测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script src="../dist/bundle.min.js"></script> <!-- all files from the src folder -->
<script src="VehicleTest.js"></script>
<script src="TruckTest.js"></script>
</head>
<body>
</body>
</html>