-
Notifications
You must be signed in to change notification settings - Fork 0
/
build.js
167 lines (146 loc) · 5.23 KB
/
build.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
/* eslint-disable import/no-extraneous-dependencies, no-console */
import * as babel from "@babel/core";
import { promises as fs } from "fs";
import { glob } from "glob";
import webpack from "webpack";
import util from "util";
import path from "path";
import targets from "./targets";
(async function main() {
// Clear the build folder
await fs.rm("./build", { recursive: true, force: true });
await fs.mkdir("./build");
// Copy files to build folder
await Promise.all(
["package.json", "LICENSE", "README.md"].map(file =>
fs.copyFile(file, `build/${file}`)
)
);
fs.copyFile("index.build.js", "build/index.js");
// Transpile for Node (except the browser entrypoint)
// In Babel, setting sourceMaps: true seems like it should produce external
// source maps and link them:
// https://babeljs.io/docs/options#source-map-options
// But it doesn't:
// https://github.com/babel/babel/issues/5261
// You can only produce external sourcemaps using the CLI, so I write
// the maps to file myself and append a reference in the transpiled source
const srcFiles = await glob("!(main.browser).js", { cwd: "src" });
await Promise.all(
srcFiles.map(file =>
(async () => {
console.log(`Transpiling ${file}`);
// Transpile and produce source maps
const transpile = await babel.transformFileAsync(`src/${file}`, {
presets: [["@babel/preset-env", { targets: targets.node }]],
plugins: ["add-module-exports"], // No .default()
sourceMaps: true,
sourceRoot: "../src"
});
// Write transpiled source
await fs.writeFile(
`build/${file}`,
`${transpile.code}\n//# sourceMappingURL=${file}.map\n`
);
// Write source maps
await fs.writeFile(
`build/${file}.map`,
JSON.stringify(Object.assign(transpile.map, { file }))
);
})()
)
);
// Create browser bundles
console.log("Bundling for the browser");
const createWebpackConfig = sourceMaps => ({
entry: "./src/main.browser.js",
mode: "production",
module: {
rules: [
{
test: /\.js$/,
// Bundle will not work if you transpile webpack or core-js polyfills
// https://stackoverflow.com/questions/57361439/how-to-exclude-core-js-using-usebuiltins-usage
// https://github.com/zloirock/core-js/issues/743
exclude: [
/\bnode_modules[\\/]{1}core-js\b/, // Allow slash or backslash
/\bnode_modules[\\/]{1}webpack\b/
],
use: {
loader: "babel-loader",
options: {
// Specify all Babel configuration here
babelrc: false,
// Fixes "TypeError: __webpack_require__(...) is not a function"
// https://github.com/webpack/webpack/issues/9379#issuecomment-509628205
// https://babeljs.io/docs/en/options#sourcetype
sourceType: "unambiguous",
presets: [
[
"@babel/preset-env",
{
// Webpack supports ES modules out of the box
// Do not transform to CJS or anything else or you break tree-shaking
modules: false,
// Adds specific imports for polyfills when they are used
useBuiltIns: "usage",
corejs: {
version: "3",
proposals: true
},
targets: targets.browsers
// Verbose preset-env output
// debug: true
}
]
]
}
}
}
]
},
output: {
filename: sourceMaps ? "bundle.withmaps.js" : "bundle.js",
path: path.resolve(__dirname, "build"),
library: "chronology",
libraryExport: "default", // No .default()
libraryTarget: "umd",
globalObject: "this"
},
optimization: {
minimize: true
},
// If you use the "source-map" option you get correct line number references
// but names in stack traces are the minified ones
// If you use "eval-source-map" you get correct names in stack traces but
// size is large and the bundle fails on older browsers
devtool: sourceMaps ? "eval-source-map" : false,
// Suppress file size warnings
performance: {
maxAssetSize: sourceMaps ? 4000000 : 400000,
maxEntrypointSize: sourceMaps ? 4000000 : 400000
}
// Detailed Webpack info
// stats: "verbose"
});
let webpackStats;
try {
// With and without sourcemaps
webpackStats = await util.promisify(webpack)(createWebpackConfig(false));
webpackStats = await util.promisify(webpack)(createWebpackConfig(true));
} catch (e) {
console.log("Webpack threw an error");
console.log(e.toString());
return; // Stop
}
if (webpackStats.hasErrors()) {
console.log("Webpack reported one or more compilation errors");
console.log(webpackStats.toString());
process.exit(1); // Return failure
}
if (webpackStats.hasWarnings()) {
console.log("Webpack reported one or more warnings");
console.log(webpackStats.toString());
}
console.log("Done");
})();