Modernize JS build scripts (#19824)
- Remove __dirname, use file URLs instead - Upgrade fabric dependency - Use fs/promises syntax, this breaks node 12 but we require 14 already The change in public/img/favicon.svg is not caused by the fabric upgrade, but it seems it was not properly generated when introduced. Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
silverwind
GitHub
parent
0a8c030600
commit
df0fb17d04
5 changed files with 48 additions and 51 deletions
2
Makefile
2
Makefile
|
|
@ -761,7 +761,7 @@ generate-gitignore:
|
||||||
|
|
||||||
.PHONY: generate-images
|
.PHONY: generate-images
|
||||||
generate-images: | node_modules
|
generate-images: | node_modules
|
||||||
npm install --no-save --no-package-lock fabric@4 imagemin-zopfli@7
|
npm install --no-save --no-package-lock fabric@5 imagemin-zopfli@7
|
||||||
node build/generate-images.js $(TAGS)
|
node build/generate-images.js $(TAGS)
|
||||||
|
|
||||||
.PHONY: generate-manpage
|
.PHONY: generate-manpage
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,8 @@
|
||||||
|
#!/usr/bin/env node
|
||||||
import imageminZopfli from 'imagemin-zopfli';
|
import imageminZopfli from 'imagemin-zopfli';
|
||||||
import {optimize} from 'svgo';
|
import {optimize} from 'svgo';
|
||||||
import {fabric} from 'fabric';
|
import {fabric} from 'fabric';
|
||||||
import fs from 'fs';
|
import {readFile, writeFile} from 'fs/promises';
|
||||||
import {resolve, dirname} from 'path';
|
|
||||||
import {fileURLToPath} from 'url';
|
|
||||||
|
|
||||||
const {readFile, writeFile} = fs.promises;
|
|
||||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
||||||
const logoFile = resolve(__dirname, '../assets/logo.svg');
|
|
||||||
const faviconFile = resolve(__dirname, '../assets/favicon.svg');
|
|
||||||
|
|
||||||
function exit(err) {
|
function exit(err) {
|
||||||
if (err) console.error(err);
|
if (err) console.error(err);
|
||||||
|
|
@ -23,8 +17,10 @@ function loadSvg(svg) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function generate(svg, outputFile, {size, bg}) {
|
async function generate(svg, path, {size, bg}) {
|
||||||
if (outputFile.endsWith('.svg')) {
|
const outputFile = new URL(path, import.meta.url);
|
||||||
|
|
||||||
|
if (String(outputFile).endsWith('.svg')) {
|
||||||
const {data} = optimize(svg, {
|
const {data} = optimize(svg, {
|
||||||
plugins: [
|
plugins: [
|
||||||
'preset-default',
|
'preset-default',
|
||||||
|
|
@ -69,19 +65,18 @@ async function generate(svg, outputFile, {size, bg}) {
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
const gitea = process.argv.slice(2).includes('gitea');
|
const gitea = process.argv.slice(2).includes('gitea');
|
||||||
const logoSvg = await readFile(logoFile, 'utf8');
|
const logoSvg = await readFile(new URL('../assets/logo.svg', import.meta.url), 'utf8');
|
||||||
const faviconSvg = await readFile(faviconFile, 'utf8');
|
const faviconSvg = await readFile(new URL('../assets/favicon.svg', import.meta.url), 'utf8');
|
||||||
|
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
generate(logoSvg, resolve(__dirname, '../public/img/logo.svg'), {size: 32}),
|
generate(logoSvg, '../public/img/logo.svg', {size: 32}),
|
||||||
generate(logoSvg, resolve(__dirname, '../public/img/logo.png'), {size: 512}),
|
generate(logoSvg, '../public/img/logo.png', {size: 512}),
|
||||||
generate(faviconSvg, resolve(__dirname, '../public/img/favicon.svg'), {size: 32}),
|
generate(faviconSvg, '../public/img/favicon.svg', {size: 32}),
|
||||||
generate(faviconSvg, resolve(__dirname, '../public/img/favicon.png'), {size: 180}),
|
generate(faviconSvg, '../public/img/favicon.png', {size: 180}),
|
||||||
generate(logoSvg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200}),
|
generate(logoSvg, '../public/img/avatar_default.png', {size: 200}),
|
||||||
generate(logoSvg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true}),
|
generate(logoSvg, '../public/img/apple-touch-icon.png', {size: 180, bg: true}),
|
||||||
gitea && generate(logoSvg, resolve(__dirname, '../public/img/gitea.svg'), {size: 32}),
|
gitea && generate(logoSvg, '../public/img/gitea.svg', {size: 32}),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
main().then(exit).catch(exit);
|
main().then(exit).catch(exit);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,14 @@
|
||||||
|
#!/usr/bin/env node
|
||||||
import fastGlob from 'fast-glob';
|
import fastGlob from 'fast-glob';
|
||||||
import {optimize} from 'svgo';
|
import {optimize} from 'svgo';
|
||||||
import {resolve, parse, dirname} from 'path';
|
import {parse} from 'path';
|
||||||
import fs from 'fs';
|
import {readFile, writeFile, mkdir} from 'fs/promises';
|
||||||
import {fileURLToPath} from 'url';
|
import {fileURLToPath} from 'url';
|
||||||
|
|
||||||
const {readFile, writeFile, mkdir} = fs.promises;
|
const glob = (pattern) => fastGlob.sync(pattern, {
|
||||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
cwd: fileURLToPath(new URL('..', import.meta.url)),
|
||||||
const glob = (pattern) => fastGlob.sync(pattern, {cwd: resolve(__dirname), absolute: true});
|
absolute: true,
|
||||||
const outputDir = resolve(__dirname, '../public/img/svg');
|
});
|
||||||
|
|
||||||
function exit(err) {
|
function exit(err) {
|
||||||
if (err) console.error(err);
|
if (err) console.error(err);
|
||||||
|
|
@ -16,7 +17,6 @@ function exit(err) {
|
||||||
|
|
||||||
async function processFile(file, {prefix, fullName} = {}) {
|
async function processFile(file, {prefix, fullName} = {}) {
|
||||||
let name;
|
let name;
|
||||||
|
|
||||||
if (fullName) {
|
if (fullName) {
|
||||||
name = fullName;
|
name = fullName;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -35,7 +35,8 @@ async function processFile(file, {prefix, fullName} = {}) {
|
||||||
{name: 'addAttributesToSVGElement', params: {attributes: [{'width': '16'}, {'height': '16'}, {'aria-hidden': 'true'}]}},
|
{name: 'addAttributesToSVGElement', params: {attributes: [{'width': '16'}, {'height': '16'}, {'aria-hidden': 'true'}]}},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
await writeFile(resolve(outputDir, `${name}.svg`), data);
|
|
||||||
|
await writeFile(fileURLToPath(new URL(`../public/img/svg/${name}.svg`, import.meta.url)), data);
|
||||||
}
|
}
|
||||||
|
|
||||||
function processFiles(pattern, opts) {
|
function processFiles(pattern, opts) {
|
||||||
|
|
@ -44,15 +45,14 @@ function processFiles(pattern, opts) {
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
try {
|
try {
|
||||||
await mkdir(outputDir);
|
await mkdir(fileURLToPath(new URL('../public/img/svg', import.meta.url)), {recursive: true});
|
||||||
} catch {}
|
} catch {}
|
||||||
|
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
...processFiles('../node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
|
...processFiles('node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
|
||||||
...processFiles('../web_src/svg/*.svg'),
|
...processFiles('web_src/svg/*.svg'),
|
||||||
...processFiles('../public/img/gitea.svg', {fullName: 'gitea-gitea'}),
|
...processFiles('public/img/gitea.svg', {fullName: 'gitea-gitea'}),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
main().then(exit).catch(exit);
|
main().then(exit).catch(exit);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="32" height="32"><path d="M395.9 484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z" fill="#fff"/><g fill="#609926"><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></g></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640" xml:space="preserve" width="32" height="32"><path style="fill:#fff" d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"/><path style="fill:#609926" d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"/><path style="fill:#609926" d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></svg>
|
||||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.2 KiB |
|
|
@ -6,15 +6,17 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
||||||
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
|
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
|
||||||
import VueLoader from 'vue-loader';
|
import VueLoader from 'vue-loader';
|
||||||
import EsBuildLoader from 'esbuild-loader';
|
import EsBuildLoader from 'esbuild-loader';
|
||||||
import {resolve, parse, dirname} from 'path';
|
import {parse, dirname} from 'path';
|
||||||
import webpack from 'webpack';
|
import webpack from 'webpack';
|
||||||
import {fileURLToPath} from 'url';
|
import {fileURLToPath} from 'url';
|
||||||
|
|
||||||
const {VueLoaderPlugin} = VueLoader;
|
const {VueLoaderPlugin} = VueLoader;
|
||||||
const {ESBuildMinifyPlugin} = EsBuildLoader;
|
const {ESBuildMinifyPlugin} = EsBuildLoader;
|
||||||
const {SourceMapDevToolPlugin} = webpack;
|
const {SourceMapDevToolPlugin} = webpack;
|
||||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
const glob = (pattern) => fastGlob.sync(pattern, {
|
||||||
const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true});
|
cwd: dirname(fileURLToPath(new URL(import.meta.url))),
|
||||||
|
absolute: true,
|
||||||
|
});
|
||||||
|
|
||||||
const themes = {};
|
const themes = {};
|
||||||
for (const path of glob('web_src/less/themes/*.less')) {
|
for (const path of glob('web_src/less/themes/*.less')) {
|
||||||
|
|
@ -43,29 +45,29 @@ export default {
|
||||||
mode: isProduction ? 'production' : 'development',
|
mode: isProduction ? 'production' : 'development',
|
||||||
entry: {
|
entry: {
|
||||||
index: [
|
index: [
|
||||||
resolve(__dirname, 'web_src/js/jquery.js'),
|
fileURLToPath(new URL('web_src/js/jquery.js', import.meta.url)),
|
||||||
resolve(__dirname, 'web_src/fomantic/build/semantic.js'),
|
fileURLToPath(new URL('web_src/fomantic/build/semantic.js', import.meta.url)),
|
||||||
resolve(__dirname, 'web_src/js/index.js'),
|
fileURLToPath(new URL('web_src/js/index.js', import.meta.url)),
|
||||||
resolve(__dirname, 'node_modules/easymde/dist/easymde.min.css'),
|
fileURLToPath(new URL('node_modules/easymde/dist/easymde.min.css', import.meta.url)),
|
||||||
resolve(__dirname, 'web_src/fomantic/build/semantic.css'),
|
fileURLToPath(new URL('web_src/fomantic/build/semantic.css', import.meta.url)),
|
||||||
resolve(__dirname, 'web_src/less/misc.css'),
|
fileURLToPath(new URL('web_src/less/misc.css', import.meta.url)),
|
||||||
resolve(__dirname, 'web_src/less/index.less'),
|
fileURLToPath(new URL('web_src/less/index.less', import.meta.url)),
|
||||||
],
|
],
|
||||||
swagger: [
|
swagger: [
|
||||||
resolve(__dirname, 'web_src/js/standalone/swagger.js'),
|
fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)),
|
||||||
resolve(__dirname, 'web_src/less/standalone/swagger.less'),
|
fileURLToPath(new URL('web_src/less/standalone/swagger.less', import.meta.url)),
|
||||||
],
|
],
|
||||||
serviceworker: [
|
serviceworker: [
|
||||||
resolve(__dirname, 'web_src/js/serviceworker.js'),
|
fileURLToPath(new URL('web_src/js/serviceworker.js', import.meta.url)),
|
||||||
],
|
],
|
||||||
'eventsource.sharedworker': [
|
'eventsource.sharedworker': [
|
||||||
resolve(__dirname, 'web_src/js/features/eventsource.sharedworker.js'),
|
fileURLToPath(new URL('web_src/js/features/eventsource.sharedworker.js', import.meta.url)),
|
||||||
],
|
],
|
||||||
...themes,
|
...themes,
|
||||||
},
|
},
|
||||||
devtool: false,
|
devtool: false,
|
||||||
output: {
|
output: {
|
||||||
path: resolve(__dirname, 'public'),
|
path: fileURLToPath(new URL('public', import.meta.url)),
|
||||||
filename: ({chunk}) => {
|
filename: ({chunk}) => {
|
||||||
// serviceworker can only manage assets below it's script's directory so
|
// serviceworker can only manage assets below it's script's directory so
|
||||||
// we have to put it in / instead of /js/
|
// we have to put it in / instead of /js/
|
||||||
|
|
@ -165,7 +167,7 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.svg$/,
|
test: /\.svg$/,
|
||||||
include: resolve(__dirname, 'public/img/svg'),
|
include: fileURLToPath(new URL('public/img/svg', import.meta.url)),
|
||||||
type: 'asset/source',
|
type: 'asset/source',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Reference in a new issue