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>
2021-04-02 08:11:04 +08:00 · 2021-04-02 08:11:04 +08:00 · 42efa14f51
parent bc1f2117f1
commit 42efa14f51
8 changed files with 157 additions and 930 deletions
--- a/.drone.yml
+++ b/.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:
--- a/.gitignore
+++ b/.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/
--- a/55
+++ b/55
@ -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
-	@if [ ! -d node_modules/fomantic-ui ]; then \
-		npm install --no-save --no-package-lock fomantic-ui@2.8.7; \
-	fi
-	rm -rf $(FOMANTIC_DEST_DIR)
-	cp -f web_src/fomantic/theme.config.less node_modules/fomantic-ui/src/theme.config
-	cp -rf web_src/fomantic/_site/* node_modules/fomantic-ui/src/_site/
-	npx gulp -f node_modules/fomantic-ui/gulpfile.js build
+$(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui:
+	ln -sf ../../semantic.json $(FOMANTIC_WORK_DIR)
+	cd $(FOMANTIC_WORK_DIR); \
+		rm -rf node_modules && mkdir node_modules && \
+		npm install fomantic-ui; \
+		rm -f semantic.json
+	@touch $(FOMANTIC_WORK_DIR)/node_modules
+
+$(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
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/semantic.json
+++ b/semantic.json
@ -9,12 +9,12 @@
      "themes": "src/themes/"
    },
    "output": {
-      "packaged": "../../web_src/fomantic/build/",
-      "uncompressed": "../../web_src/fomantic/build/components/",
-      "compressed": "../../web_src/fomantic/build/components/",
-      "themes": "../../web_src/fomantic/build/themes/"
+      "packaged": "../../build/",
+      "uncompressed": "../../build/components/",
+      "compressed": "../../build/components/",
+      "themes": "../../build/themes/"
    },
-    "clean": "../../web_src/fomantic/build/"
+    "clean": "../../build/"
  },
  "permission": false,
  "autoInstall": false,
--- a/web_src/fomantic/.npmrc
+++ b/web_src/fomantic/.npmrc
@ -0,0 +1,2 @@
+optional=false
+package-lock=false
--- a/webpack.config.js
+++ b/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({
-        extractComments: false,
-        terserOptions: {
-          output: {
-            comments: false,
-          },
-        },
+      new ESBuildMinifyPlugin({
+        target: 'es2015',
+        minify: true
      }),
      new CssMinimizerPlugin({
        sourceMap: true,
@ -131,36 +126,9 @@ module.exports = {
        exclude: /node_modules/,
        use: [
          {
-            loader: 'babel-loader',
+            loader: 'esbuild-loader',
            options: {
-              sourceMaps: true,
-              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,
-              },
+              target: 'es2015'
            },
          },
        ],