Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move from webpack to esbuild bundler

Browse source
This commit is contained in:
Subho 2023-04-12 13:53:20 +05:30 • committed by GitHub
parent 0aaccb9ea1
commit 1c30b49d3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 156 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

14
.babelrc.json
View file

@ -1,14 +0,0 @@
{
"presets": [
["@babel/env", {
"targets": {
"chrome": "57",
"firefox": "52",
"safari": "10.3",
"edge": "16",
"opera": "44"
}
}],
"@babel/preset-react"
]
}

1
.eslintrc.json
View file

@ -5,7 +5,6 @@
"es6": true
},
"extends": ["eslint:recommended", "standard", "standard-jsx", "react-app"],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": "7",
"ecmaFeatures": {

4
Makefile
View file

@ -81,8 +81,8 @@ $(SPEC): packaging/$(SPEC).in $(NODE_MODULES_TEST)
provides=$$(npm ls --omit dev --package-lock-only --depth=Infinity | grep -Eo '[^[:space:]]+@[^[:space:]]+' | sort -u | sed 's/^/Provides: bundled(npm(/; s/\(.*\)@/\1)) = /'); \
awk -v p="$$provides" '{gsub(/%{VERSION}/, "$(VERSION)"); gsub(/%{NPM_PROVIDES}/, p)}1' $< > $@
$(DIST_TEST): $(NODE_MODULES_TEST) $(COCKPIT_REPO_STAMP) $(shell find src/ -type f) package.json webpack.config.js
NODE_ENV=$(NODE_ENV) node_modules/.bin/webpack
$(DIST_TEST): $(NODE_MODULES_TEST) $(COCKPIT_REPO_STAMP) $(shell find src/ -type f) package.json build.js
NODE_ENV=$(NODE_ENV) ./build.js
watch:
NODE_ENV=$(NODE_ENV) npm run watch

6
README.md
View file

@ -46,7 +46,7 @@ After changing the code and running `make` again, reload the Cockpit page in
your browser.
You can also use
[watch mode](https://webpack.js.org/guides/development/#using-watch-mode) to
[watch mode](https://esbuild.github.io/api/#watch) to
automatically update the bundle on every code change with
$ npm run watch
@ -106,11 +106,11 @@ Violations of some rules can be fixed automatically by:
Rules configuration can be found in the `.stylelintrc.json` file.
During fast iterative development, you can also choose to not run stylelint.
During fast iterative development, you can also choose to not run eslint/stylelint.
This speeds up the build and avoids build failures due to e. g. ill-formatted
css or other issues:
$ make STYLELINT=0
$ make LINT=0
# Running tests locally

136
build.js Executable file
View file

@ -0,0 +1,136 @@
#!/usr/bin/env node
import fs from 'node:fs';
import path from 'node:path';
import os from 'node:os';
import copy from 'esbuild-plugin-copy';
import { cleanPlugin } from './pkg/lib/esbuild-cleanup-plugin.js';
import { cockpitCompressPlugin } from './pkg/lib/esbuild-compress-plugin.js';
import { cockpitPoEsbuildPlugin } from './pkg/lib/cockpit-po-plugin.js';
import { cockpitRsyncEsbuildPlugin } from './pkg/lib/cockpit-rsync-plugin.js';
import { esbuildStylesPlugins } from './pkg/lib/esbuild-common.js';
import { eslintPlugin } from './pkg/lib/esbuild-eslint-plugin.js';
import { stylelintPlugin } from './pkg/lib/esbuild-stylelint-plugin.js';
const useWasm = os.arch() !== 'x64';
const esbuild = (await import(useWasm ? 'esbuild-wasm' : 'esbuild')).default;
const production = process.env.NODE_ENV === 'production';
const watchMode = process.env.ESBUILD_WATCH === "true";
// linters dominate the build time, so disable them for production builds by default, but enable in watch mode
const lint = process.env.LINT ? (process.env.LINT !== 0) : (watchMode || !production);
// List of directories to use when using import statements
const nodePaths = ['pkg/lib'];
const outdir = 'dist';
// Obtain package name from package.json
const packageJson = JSON.parse(fs.readFileSync('package.json'));
function notifyEndPlugin() {
return {
name: 'notify-end',
setup(build) {
let startTime;
build.onStart(() => {
startTime = new Date();
});
build.onEnd(() => {
const endTime = new Date();
const timeStamp = endTime.toTimeString().split(' ')[0];
console.log(`${timeStamp}: Build finished in ${endTime - startTime} ms`);
});
}
};
}
const cwd = process.cwd();
// similar to fs.watch(), but recursively watches all subdirectories
function watch_dirs(dir, on_change) {
const callback = (ev, dir, fname) => {
// only listen for "change" events, as renames are noisy
// ignore hidden files
const isHidden = /^\./.test(fname);
if (ev !== "change" || isHidden) {
return;
}
on_change(path.join(dir, fname));
};
fs.watch(dir, {}, (ev, path) => callback(ev, dir, path));
// watch all subdirectories in dir
const d = fs.opendirSync(dir);
let dirent;
while ((dirent = d.readSync()) !== null) {
if (dirent.isDirectory())
watch_dirs(path.join(dir, dirent.name), on_change);
}
d.closeSync();
}
const context = await esbuild.context({
...!production ? { sourcemap: "linked" } : {},
bundle: true,
entryPoints: ['./src/index.js'],
external: ['*.woff', '*.woff2', '*.jpg', '*.svg', '../../assets*'], // Allow external font files which live in ../../static/fonts
legalComments: 'external', // Move all legal comments to a .LEGAL.txt file
loader: { ".js": "jsx" },
minify: production,
nodePaths,
outdir,
target: ['es2020'],
plugins: [
cleanPlugin(),
...lint
? [
stylelintPlugin({ filter: new RegExp(cwd + '\/src\/.*\.(css?|scss?)$') }),
eslintPlugin({ filter: new RegExp(cwd + '\/src\/.*\.(jsx?|js?)$') })
]
: [],
// Esbuild will only copy assets that are explicitly imported and used
// in the code. This is a problem for index.html and manifest.json which are not imported
copy({
assets: [
{ from: ['./src/manifest.json'], to: ['./manifest.json'] },
{ from: ['./src/index.html'], to: ['./index.html'] },
]
}),
...esbuildStylesPlugins,
cockpitPoEsbuildPlugin(),
...production ? [cockpitCompressPlugin()] : [],
cockpitRsyncEsbuildPlugin({ dest: packageJson.name }),
notifyEndPlugin(),
]
});
try {
await context.rebuild();
} catch (e) {
if (!watchMode)
process.exit(1);
// ignore errors in watch mode
}
if (watchMode) {
const on_change = async path => {
console.log("change detected:", path);
await context.cancel();
try {
await context.rebuild();
} catch (e) {} // ignore in watch mode
};
watch_dirs('src', on_change);
// wait forever until Control-C
await new Promise(() => {});
}
context.dispose();

29
package.json
View file

@ -7,25 +7,21 @@
"author": "",
"license": "LGPL-2.1",
"scripts": {
"watch": "webpack --watch --progress",
"build": "webpack",
"watch": "ESBUILD_WATCH='true' ./build.js",
"build": "./build.js",
"eslint": "eslint --ext .js --ext .jsx src/",
"eslint:fix": "eslint --fix --ext .js --ext .jsx src/",
"stylelint": "stylelint src/*{.css,scss}",
"stylelint:fix": "stylelint --fix src/*{.css,scss}"
},
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/eslint-parser": "^7.17.0",
"@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"argparse": "^2.0.1",
"babel-loader": "^8.0.6",
"chrome-remote-interface": "^0.32.1",
"compression-webpack-plugin": "^9.0.0",
"copy-webpack-plugin": "^9.0.0",
"css-loader": "^6.5.0",
"css-minimizer-webpack-plugin": "^3.0.1",
"esbuild": "^0.17.15",
"esbuild-plugin-copy": "^2.1.1",
"esbuild-plugin-replace": "^1.3.0",
"esbuild-sass-plugin": "^2.8.0",
"esbuild-wasm": "^0.17.16",
"eslint": "^8.13.0",
"eslint-config-react-app": "^7.0.0",
"eslint-config-standard": "^17.0.0-1",
@ -36,22 +32,15 @@
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"eslint-webpack-plugin": "^3.1.1",
"htmlparser": "^1.7.7",
"jed": "^1.1.1",
"mini-css-extract-plugin": "^2.5.3",
"po2json": "^1.0.0-alpha",
"qunit": "^2.9.3",
"sass": "^1.35.2",
"sass-loader": "^12.1.0",
"sass": "^1.61.0",
"sizzle": "^2.3.3",
"string-replace-loader": "^3.0.0",
"stylelint": "^14.9.1",
"stylelint-config-standard-scss": "^5.0.0",
"stylelint-webpack-plugin": "^3.3.0",
"terser-webpack-plugin": "^5.1.4",
"webpack": "^5.54.0",
"webpack-cli": "^4.9.1"
"stylelint-formatter-pretty": "^3.2.0"
},
"dependencies": {
"@patternfly/patternfly": "4.224.4",

2
packaging/cockpit-starter-kit.spec.in
View file

@ -48,7 +48,7 @@ appstream-util validate-relax --nonet %{buildroot}/%{_datadir}/metainfo/*
%files
%doc README.md
%license LICENSE dist/index.js.LICENSE.txt.gz
%license LICENSE dist/index.js.LEGAL.txt dist/index.css.LEGAL.txt
%{_datadir}/cockpit/*
%{_datadir}/metainfo/*

3
src/index.html
View file

@ -24,9 +24,8 @@ along with this package; If not, see <http://www.gnu.org/licenses/>.
<link rel="stylesheet" href="index.css">
<script type="text/javascript" src="../base1/cockpit.js"></script>
<script type="text/javascript" src="po.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="po.js"></script>
</head>
<body class="pf-m-redhat-font">

4
test/run
View file

@ -7,4 +7,8 @@ set -eu
TEST_SCENARIO="${TEST_SCENARIO:-}"
[ "${TEST_SCENARIO}" = "${TEST_SCENARIO##firefox}" ] || export TEST_BROWSER=firefox
export RUN_TESTS_OPTIONS=--track-naughties
# linters are off by default for production builds, but we want to run them in CI
export LINT=1
make check

168
webpack.config.js
View file

@ -1,168 +0,0 @@
import fs from "fs";
import copy from "copy-webpack-plugin";
import extract from "mini-css-extract-plugin";
import TerserJSPlugin from 'terser-webpack-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import CompressionPlugin from "compression-webpack-plugin";
import ESLintPlugin from 'eslint-webpack-plugin';
import StylelintPlugin from 'stylelint-webpack-plugin';
import { CockpitPoWebpackPlugin } from './pkg/lib/cockpit-po-plugin.js';
import { CockpitRsyncWebpackPlugin } from "./pkg/lib/cockpit-rsync-plugin.js";
/* A standard nodejs and webpack pattern */
const production = process.env.NODE_ENV === 'production';
/* development options for faster iteration */
const eslint = process.env.ESLINT !== '0';
/* Default to disable csslint for faster production builds */
const stylelint = process.env.STYLELINT ? (process.env.STYLELINT !== '0') : !production;
// Obtain package name from package.json
const packageJson = JSON.parse(fs.readFileSync('package.json'));
// Non-JS files which are copied verbatim to dist/
const copy_files = [
"./src/index.html",
"./src/manifest.json",
];
const plugins = [
new copy({ patterns: copy_files }),
new extract({ filename: "[name].css" }),
new CockpitPoWebpackPlugin(),
new CockpitRsyncWebpackPlugin({ dest: packageJson.name }),
];
if (eslint) {
plugins.push(new ESLintPlugin({ extensions: ["js", "jsx"], failOnWarning: true, }));
}
if (stylelint) {
plugins.push(new StylelintPlugin({
context: "src/",
}));
}
/* Only minimize when in production mode */
if (production) {
plugins.unshift(new CompressionPlugin({
test: /\.(js|html|css)$/,
deleteOriginalAssets: true
}));
}
const config = {
mode: production ? 'production' : 'development',
resolve: {
modules: ["node_modules", 'pkg/lib'],
alias: { 'font-awesome': 'font-awesome-sass/assets/stylesheets' },
},
resolveLoader: {
modules: ["node_modules", 'pkg/lib'],
},
watchOptions: {
ignored: /node_modules/,
},
entry: {
index: "./src/index.js",
},
// cockpit.js gets included via <script>, everything else should be bundled
externals: { cockpit: "cockpit" },
devtool: "source-map",
stats: "errors-warnings",
// always regenerate dist/, so make rules work
output: { clean: true, compareBeforeEmit: false },
optimization: {
minimize: production,
minimizer: [
new TerserJSPlugin({
extractComments: {
condition: true,
filename: `[file].LICENSE.txt?query=[query]&filebase=[base]`,
banner(licenseFile) {
return `License information can be found in ${licenseFile}`;
},
},
}),
new CssMinimizerPlugin()
],
},
module: {
rules: [
{
exclude: /node_modules/,
use: "babel-loader",
test: /\.(js|jsx)$/
},
/* HACK: remove unwanted fonts from PatternFly's css */
{
test: /patternfly-4-cockpit.scss$/,
use: [
extract.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
url: false,
},
},
{
loader: 'string-replace-loader',
options: {
multiple: [
{
search: /src:url\("patternfly-icons-fake-path\/pficon[^}]*/g,
replace: 'src:url("../base1/fonts/patternfly.woff") format("woff");',
},
{
search: /@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g,
replace: '',
},
]
},
},
{
loader: 'sass-loader',
options: {
sourceMap: !production,
sassOptions: {
outputStyle: production ? 'compressed' : undefined,
},
},
},
]
},
{
test: /\.s?css$/,
exclude: /patternfly-4-cockpit.scss/,
use: [
extract.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
url: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: !production,
sassOptions: {
outputStyle: production ? 'compressed' : undefined,
},
},
},
]
},
]
},
plugins
};
export default config;