Skip to content

Instantly share code, notes, and snippets.

@fanyang89 fanyang89/fuse.ts
Created Apr 29, 2018

Embed
What would you like to do?
Example fuse-box config with code splitting
import * as autoprefixer from "autoprefixer";
import * as express from "express";
import {
Bundle,
CSSPlugin,
FuseBox,
FuseBoxOptions,
ImageBase64Plugin,
JSONPlugin,
PlainJSPlugin,
PostCSSPlugin,
QuantumPlugin,
ReplacePlugin,
WebIndexPlugin,
} from "fuse-box";
import { TypeHelper } from "fuse-box-typechecker";
import { context, src, task } from "fuse-box/sparky";
import * as path from "path";
import { env } from "process";
import * as rimraf from "rimraf";
const fallback = require("express-history-api-fallback");
const isProduction = env.NODE_ENV === "production";
const basePlugin = [
JSONPlugin(),
PlainJSPlugin(),
ImageBase64Plugin({
useDefault: true,
}),
// PostCSSPlugin([autoprefixer()]),
CSSPlugin(),
];
const config = {
getDevPlugins(): any[] {
return [
...basePlugin,
WebIndexPlugin({
template: "src/index.html",
title: "[dev]",
}),
];
},
getProductionPlugins() {
return [
...basePlugin,
WebIndexPlugin({
template: "src/index.html",
title: "",
}),
ReplacePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
QuantumPlugin({
bakeApiIntoBundle: "app",
css: true,
polyfills: ["Promise"],
treeshake: true,
uglify: true,
}),
];
},
getBundles(fuse: FuseBox): Bundle[] {
return [
fuse.bundle("vendor").instructions("~ App.tsx"),
fuse.bundle("app").instructions("> [App.tsx]"),
];
},
getFuseboxConfig(plugins: any[]): FuseBoxOptions {
return {
alias: {
"~/component-indexof.js": "component-indexof",
},
homeDir: "src",
output: "dist/$name.js",
plugins,
sourceMaps: {
project: true,
vendor: false,
},
target: "browser@es5",
useTypescriptCompiler: true,
};
},
};
context(() => config);
task("dev", (ctx: typeof config) => {
const plugins = ctx.getDevPlugins();
const fuseboxConfig = ctx.getFuseboxConfig(plugins);
const fuse = FuseBox.init(fuseboxConfig);
const bundles = ctx.getBundles(fuse);
bundles.forEach(it => {
const item = it.watch().hmr();
});
fuse.dev({ root: false }, server => {
const app = server.httpServer.app;
const distDir = path.resolve("./dist");
const publicDir = path.resolve("./public");
// serve static file from public folder
app.use("/public/", express.static(publicDir));
// html5 fallback
app.use(express.static(distDir));
app.use(fallback("index.html", { root: distDir }));
});
fuse.run();
});
task("build", (ctx: typeof config) => {
const plugins = ctx.getProductionPlugins();
const fuseConfig = ctx.getFuseboxConfig(plugins);
const fuse = FuseBox.init(fuseConfig);
const bundles = ctx.getBundles(fuse);
fuse.run();
});
task("check", (ctx: typeof config) => {
const typeHelper = TypeHelper({
basePath: "./",
name: "Checking type for App",
tsConfig: "./tsconfig.json",
tsLint: "./tslint.json",
});
typeHelper.runWatch("./src");
});
task("clean", async (ctx: typeof config) => {
rimraf("./dist/*.*", (err: Error) => {
console.log(err);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.