Introduce esbuild on webpack (#14578)

* Vendor node mods as cache; fix esbuild/fomantic offline build

* Fix --exclude; use bsdtar for consistent globbing

* Fall back to GNU tar; forward-compatible for APT 2.0

* Avoid having extd. attrs with bsdtar

* Dependency and misc. optimizations

* Remove extra code after esbuild-loader update

Co-authored-by: Mike L <cl.jeremy@qq.com>

.drone.yml

@@ -495,7 +495,7 @@ steps:
     pull: always
     image: techknowlogick/xgo:go-1.16.x
     commands:
-      - curl -sL https://deb.nodesource.com/setup_14.x | bash - && apt -y install nodejs
+      - curl -sL https://deb.nodesource.com/setup_14.x | bash - && apt -y install nodejs bsdtar\|libarchive-tools
       - export PATH=$PATH:$GOPATH/bin
       - make release
     environment:
@@ -591,7 +591,7 @@ steps:
     pull: always
     image: techknowlogick/xgo:go-1.16.x
     commands:
-      - curl -sL https://deb.nodesource.com/setup_14.x | bash - && apt -y install nodejs
+      - curl -sL https://deb.nodesource.com/setup_14.x | bash - && apt-get install -y nodejs bsdtar\|libarchive-tools
       - export PATH=$PATH:$GOPATH/bin
       - make release
     environment:

.gitignore

@@ -80,6 +80,8 @@ coverage.all
 /public/css
 /public/fonts
 /public/img/webpack
+/web_src/fomantic/node_modules
+/web_src/fomantic/semantic.json
 /web_src/fomantic/build/*
 !/web_src/fomantic/build/semantic.js
 !/web_src/fomantic/build/semantic.css
@@ -93,6 +95,7 @@ coverage.all
 !/web_src/fomantic/build/themes/default/assets/fonts/outline-icons.woff2
 /VERSION
 /.air
+/.npm-cache
 
 # Snapcraft
 snap/.snapcraft/

Makefile

@@ -14,6 +14,8 @@ else
 
 # This is the "normal" part of the Makefile
 
+TAR := $(shell hash bsdtar > /dev/null 2>&1 && echo "bsdtar --no-xattrs" || echo "tar" )
+
 DIST := dist
 DIST_DIRS := $(DIST)/binaries $(DIST)/release
 IMPORT := code.gitea.io/gitea
@@ -93,7 +95,7 @@ GO_PACKAGES ?= $(filter-out code.gitea.io/gitea/models/migrations code.gitea.io/
 
 FOMANTIC_CONFIGS := semantic.json web_src/fomantic/theme.config.less web_src/fomantic/_site/globals/site.variables
 FOMANTIC_DEST := web_src/fomantic/build/semantic.js web_src/fomantic/build/semantic.css
-FOMANTIC_DEST_DIR := web_src/fomantic/build
+FOMANTIC_WORK_DIR := web_src/fomantic
 
 WEBPACK_SOURCES := $(shell find web_src/js web_src/less -type f)
 WEBPACK_CONFIGS := webpack.config.js
@@ -642,14 +644,16 @@ release-compress: | $(DIST_DIRS)
 	cd $(DIST)/release/; for file in `find . -type f -name "*"`; do echo "compressing $${file}" && gxz -k -9 $${file}; done;
 
 .PHONY: release-sources
-release-sources: | $(DIST_DIRS) node_modules
+release-sources: | $(DIST_DIRS) npm-cache
 	echo $(VERSION) > $(STORED_VERSION_FILE)
-	tar --exclude=./$(DIST) --exclude=./.git --exclude=./$(MAKE_EVIDENCE_DIR) --exclude=./node_modules/.cache --exclude=./$(AIR_TMP_DIR) -czf $(DIST)/release/gitea-src-$(VERSION).tar.gz .
+	$(eval EXCL := --exclude=$(shell [ ! "$(TAR)" = "tar" ] && echo "^" )./)
+	$(eval EXCL_RECURSIVE := --exclude=)
+	$(TAR) $(EXCL)$(DIST) $(EXCL).git $(EXCL)$(MAKE_EVIDENCE_DIR) $(EXCL_RECURSIVE)node_modules $(EXCL)$(AIR_TMP_DIR) -czf $(DIST)/release/gitea-src-$(VERSION).tar.gz .
 	rm -f $(STORED_VERSION_FILE)
 
 .PHONY: release-docs
 release-docs: | $(DIST_DIRS) docs
-	tar -czf $(DIST)/release/gitea-docs-$(VERSION).tar.gz -C ./docs/public .
+	$(TAR) -czf $(DIST)/release/gitea-docs-$(VERSION).tar.gz -C ./docs/public .
 
 .PHONY: docs
 docs:
@@ -662,6 +666,25 @@ node_modules: package-lock.json
 	npm install --no-save
 	@touch node_modules
 
+.PHONY: npm-cache
+npm-cache: .npm-cache $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui
+
+.npm-cache: package-lock.json
+	rm -rf .npm-cache
+	$(eval ESBUILD_VERSION := `node -p "require('./package-lock.json').dependencies.esbuild.version"`)
+	npm config --userconfig=.npmrc set cache=.npm-cache
+	rm -rf node_modules && npm install --no-save
+	npm config --userconfig=$(FOMANTIC_WORK_DIR)/.npmrc set cache=../../.npm-cache
+	echo esbuild-{darwin-64,linux-{arm,arm64,32,64},windows-{32,64}}@$(ESBUILD_VERSION) | tr " " "\n" | xargs -n 1 -P 4 npm cache add
+	rm -rf $(FOMANTIC_WORK_DIR)/node_modules
+	@touch .npm-cache
+
+.PHONY: npm-uncache
+npm-uncache:
+	rm -rf .npm-cache
+	npm config --userconfig=$(FOMANTIC_WORK_DIR)/.npmrc rm cache
+	npm config --userconfig=.npmrc rm cache
+
 .PHONY: npm-update
 npm-update: node-check | node_modules
 	npx updates -cu
@@ -672,14 +695,22 @@ npm-update: node-check | node_modules
 .PHONY: fomantic
 fomantic: $(FOMANTIC_DEST)
 
-$(FOMANTIC_DEST): $(FOMANTIC_CONFIGS) | node_modules
+$(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui:
-	@if [ ! -d node_modules/fomantic-ui ]; then \
+	ln -sf ../../semantic.json $(FOMANTIC_WORK_DIR)
-		npm install --no-save --no-package-lock fomantic-ui@2.8.7; \
+	cd $(FOMANTIC_WORK_DIR); \
-	fi
+		rm -rf node_modules && mkdir node_modules && \
-	rm -rf $(FOMANTIC_DEST_DIR)
+		npm install fomantic-ui; \
-	cp -f web_src/fomantic/theme.config.less node_modules/fomantic-ui/src/theme.config
+		rm -f semantic.json
-	cp -rf web_src/fomantic/_site/* node_modules/fomantic-ui/src/_site/
+	@touch $(FOMANTIC_WORK_DIR)/node_modules
-	npx gulp -f node_modules/fomantic-ui/gulpfile.js build
+
+$(FOMANTIC_DEST): $(FOMANTIC_CONFIGS) $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui
+	ln -sf ../../semantic.json $(FOMANTIC_WORK_DIR)
+	rm -rf $(FOMANTIC_WORK_DIR)/build
+	cd $(FOMANTIC_WORK_DIR); \
+		cp -f theme.config.less node_modules/fomantic-ui/src/theme.config; \
+		cp -rf _site node_modules/fomantic-ui/src/; \
+		npx gulp -f node_modules/fomantic-ui/gulpfile.js build; \
+		rm -f semantic.json
 	@touch $(FOMANTIC_DEST)
 
 .PHONY: webpack

package.json

@@ -5,14 +5,9 @@
     "node": ">= 10.13.0"
   },
   "dependencies": {
-    "@babel/core": "7.13.10",
-    "@babel/plugin-transform-runtime": "7.13.10",
-    "@babel/preset-env": "7.13.10",
-    "@babel/runtime": "7.13.10",
     "@claviska/jquery-minicolors": "2.3.5",
     "@primer/octicons": "12.1.0",
     "add-asset-webpack-plugin": "2.0.1",
-    "babel-loader": "8.2.2",
     "clipboard": "2.0.8",
     "codemirror": "5.60.0",
     "core-js": "3.9.1",
@@ -20,6 +15,7 @@
     "css-minimizer-webpack-plugin": "1.3.0",
     "dropzone": "5.8.1",
     "easymde": "2.14.0",
+    "esbuild-loader": "2.11.0",
     "escape-goat": "3.0.0",
     "fast-glob": "3.2.5",
     "font-awesome": "4.7.0",

semantic.json

@@ -9,12 +9,12 @@
       "themes": "src/themes/"
     },
     "output": {
-      "packaged": "../../web_src/fomantic/build/",
+      "packaged": "../../build/",
-      "uncompressed": "../../web_src/fomantic/build/components/",
+      "uncompressed": "../../build/components/",
-      "compressed": "../../web_src/fomantic/build/components/",
+      "compressed": "../../build/components/",
-      "themes": "../../web_src/fomantic/build/themes/"
+      "themes": "../../build/themes/"
     },
-    "clean": "../../web_src/fomantic/build/"
+    "clean": "../../build/"
   },
   "permission": false,
   "autoInstall": false,

web_src/fomantic/.npmrc

@@ -0,0 +1,2 @@
+optional=false
+package-lock=false

webpack.config.js

@@ -5,9 +5,8 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const LicenseCheckerWebpackPlugin = require('license-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const {statSync} = require('fs');
+const {ESBuildMinifyPlugin} = require('esbuild-loader');
 const {resolve, parse} = require('path');
 const {SourceMapDevToolPlugin} = require('webpack');
 
@@ -78,13 +77,9 @@ module.exports = {
   optimization: {
     minimize: isProduction,
     minimizer: [
-      new TerserPlugin({
+      new ESBuildMinifyPlugin({
-        extractComments: false,
+        target: 'es2015',
-        terserOptions: {
+        minify: true
-          output: {
-            comments: false,
-          },
-        },
       }),
       new CssMinimizerPlugin({
         sourceMap: true,
@@ -131,36 +126,9 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           {
-            loader: 'babel-loader',
+            loader: 'esbuild-loader',
             options: {
-              sourceMaps: true,
+              target: 'es2015'
-              cacheDirectory: true,
-              cacheCompression: false,
-              cacheIdentifier: [
-                resolve(__dirname, 'package.json'),
-                resolve(__dirname, 'package-lock.json'),
-                resolve(__dirname, 'webpack.config.js'),
-              ].map((path) => statSync(path).mtime.getTime()).join(':'),
-              presets: [
-                [
-                  '@babel/preset-env',
-                  {
-                    useBuiltIns: 'usage',
-                    corejs: 3,
-                  },
-                ],
-              ],
-              plugins: [
-                [
-                  '@babel/plugin-transform-runtime',
-                  {
-                    regenerator: true,
-                  }
-                ],
-              ],
-              generatorOpts: {
-                compact: false,
-              },
             },
           },
         ],