浏览代码

[frontend] Upgrade Webpack, Babel and Vue to the latest versions

Johan Åhlén 4 年之前
父节点
当前提交
8fec54e372
共有 5 个文件被更改,包括 421 次插入354 次删除
  1. 2 1
      .babelrc
  2. 2 4
      desktop/core/src/desktop/js/webpack/configUtils.js
  3. 372 303
      package-lock.json
  4. 19 20
      package.json
  5. 26 26
      webpack.config.js

+ 2 - 1
.babelrc

@@ -15,7 +15,8 @@
     ["@babel/proposal-class-properties", {
       "loose": true
     }],
-    "@babel/proposal-object-rest-spread",
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    "@babel/proposal-object-rest-spread"
   ],
   "overrides": [{
     "test": "./desktop/core/src/desktop/js/parse/sqlAutocompleteParser.js",

+ 2 - 4
desktop/core/src/desktop/js/webpack/configUtils.js

@@ -15,7 +15,6 @@
 // limitations under the License.
 
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
 const RelativeBundleTracker = require('./relativeBundleTracker');
 const RemoveVueAbsolutePathFromMapPlugin = require('./removeVueAbsolutePathFromMapPlugin');
 const webpack = require('webpack');
@@ -29,7 +28,6 @@ const BUNDLES = {
 
 const getPluginConfig = (name, withAnalyzer) => {
   const plugins = [
-    new CleanObsoleteChunks(),
     new webpack.SourceMapDevToolPlugin({
       filename: `${name}/[file].map`,
       publicPath: `/static/desktop/js/bundles/${name}/`,
@@ -65,13 +63,13 @@ const hashCode = str => {
 
 /**
  * @param {webpack.Module} module
- * @param {compilation.Chunk[]} chunks
+ * @param {Set<compilation.Chunk>} chunks
  * @param {string} cacheGroupKey
  * @return {string}
  */
 const splitChunksName = (module, chunks, cacheGroupKey) => {
   let fullName = cacheGroupKey !== 'default' ? cacheGroupKey + '~' : '';
-  fullName += chunks.map(item => item.name).join('~');
+  fullName += [...chunks].map(item => item.name).join('~');
   if (fullName.length > 75) {
     return fullName.slice(0, 65).replace(/~[^~]*$/, '') + '~' + hashCode(fullName);
   }

文件差异内容过多而无法显示
+ 372 - 303
package-lock.json


+ 19 - 20
package.json

@@ -44,7 +44,6 @@
   },
   "dependencies": {
     "@gethue/sql-formatter": "4.0.3",
-    "@types/lodash": "^4.14.161",
     "axios": "0.21.1",
     "clipboard": "1.7.1",
     "core-js": "^3.4.2",
@@ -80,37 +79,37 @@
     "selectize": "0.12.6",
     "selectize-plugin-clear": "0.0.3",
     "sprintf-js": "1.1.2",
-    "vue": "^3.0.5",
+    "vue": "3.0.11",
     "vue-custom-element": "3.2.14",
     "vue3-datepicker": "^0.2.4"
   },
   "devDependencies": {
-    "@babel/core": "7.10.2",
-    "@babel/node": "7.10.1",
-    "@babel/plugin-proposal-class-properties": "7.10.1",
-    "@babel/plugin-proposal-decorators": "^7.10.3",
-    "@babel/plugin-proposal-object-rest-spread": "7.10.1",
+    "@babel/core": "7.14.3",
+    "@babel/node": "7.14.2",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/plugin-proposal-decorators": "7.13.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.13.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.10.2",
-    "@babel/preset-typescript": "7.10.1",
+    "@babel/preset-env": "7.14.4",
+    "@babel/preset-typescript": "7.13.0",
     "@types/file-saver": "^2.0.1",
     "@types/jest": "26.0.0",
     "@types/jquery": "3.5.0",
     "@types/knockout": "3.4.67",
+    "@types/lodash": "^4.14.161",
     "@types/luxon": "1.25.0",
     "@types/qs": "6.9.4",
     "@types/sanitize-html": "1.27.0",
-    "@types/webpack": "4.41.23",
+    "@types/webpack": "5.28.0",
     "@typescript-eslint/eslint-plugin": "3.4.0",
     "@typescript-eslint/parser": "3.4.0",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/compiler-sfc": "3.0.11",
     "@vue/test-utils": "^2.0.0-rc.1",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.0.1",
     "babel-jscs": "3.0.0-beta1",
-    "babel-loader": "8.1.0",
-    "babel-plugin-module-resolver": "4.0.0",
+    "babel-loader": "8.2.2",
+    "babel-plugin-module-resolver": "4.1.0",
     "babel-preset-typescript-vue3": "^2.0.8",
     "clean-webpack-plugin": "1.0.1",
     "copy-webpack-plugin": "^6.0.3",
@@ -136,7 +135,7 @@
     "prettier": "2.0.5",
     "sass": "1.32.12",
     "sass-loader": "8.0.2",
-    "source-map-loader": "1.0.0",
+    "source-map-loader": "3.0.0",
     "style-loader": "^2.0.0",
     "stylelint": "13.6.0",
     "stylelint-config-standard": "20.0.0",
@@ -144,14 +143,14 @@
     "ts-jest": "^26.5.1",
     "ts-loader": "7.0.5",
     "typescript": "3.9.5",
+    "util": "0.12.4",
     "vti": "0.0.24",
     "vue-jest": "^5.0.0-alpha.8",
-    "vue-loader": "^16.1.2",
-    "webpack": "4.43.0",
-    "webpack-bundle-analyzer": "3.8.0",
+    "vue-loader": "16.2.0",
+    "webpack": "5.38.1",
+    "webpack-bundle-analyzer": "4.4.2",
     "webpack-bundle-tracker": "0.4.3",
-    "webpack-clean-obsolete-chunks": "0.4.0",
-    "webpack-cli": "3.3.11"
+    "webpack-cli": "4.7.0"
   },
   "scripts": {
     "devinstall": "npm cache clean && npm install && npm prune",

+ 26 - 26
webpack.config.js

@@ -22,43 +22,45 @@ const {
   splitChunksName
 } = require('./desktop/core/src/desktop/js/webpack/configUtils');
 
+process.traceDeprecation = true;
+
 const config = {
   devtool: false,
   entry: {
-    hue: ['./desktop/core/src/desktop/js/hue.js'],
-    editor: ['./desktop/core/src/desktop/js/apps/editor/app.js'],
-    notebook: ['./desktop/core/src/desktop/js/apps/notebook/app.js'],
-    tableBrowser: ['./desktop/core/src/desktop/js/apps/tableBrowser/app.js'],
-    jobBrowser: ['./desktop/core/src/desktop/js/apps/jobBrowser/app.js']
+    hue: { import: './desktop/core/src/desktop/js/hue.js' },
+    editor: { import: './desktop/core/src/desktop/js/apps/editor/app.js', dependOn: 'hue' },
+    notebook: { import: './desktop/core/src/desktop/js/apps/notebook/app.js', dependOn: 'hue' },
+    tableBrowser: {
+      import: './desktop/core/src/desktop/js/apps/tableBrowser/app.js',
+      dependOn: 'hue'
+    },
+    jobBrowser: { import: './desktop/core/src/desktop/js/apps/jobBrowser/app.js', dependOn: 'hue' }
   },
   mode: 'development',
   module: {
     rules: [
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      },
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
         loader: 'babel-loader'
       },
       { test: /\.js$/, use: ['source-map-loader'], enforce: 'pre' },
-      { test: /\.(html)$/, loader: 'html?interpolate&removeComments=false' },
-      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
-      { test: /\.s[ac]ss$/, loader: 'style-loader!css-loader!sass-loader' },
-      { test: /\.css$/, loader: 'style-loader!css-loader' },
-      { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'file-loader' },
       {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader'
+        test: /\.(html)$/,
+        use: [{ loader: 'html', options: { interpolater: true, removeComments: false } }]
       },
+      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
+      { test: /\.s[ac]ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { test: /\.(woff2?|ttf|eot|svg)$/, use: ['file-loader'] },
       {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          shadowMode: true,
-          loaders: {
-            less: ['css-loader', 'less-loader', 'sass-loader']
-          }
-        }
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
       }
     ]
   },
@@ -70,15 +72,13 @@ const config = {
       name: splitChunksName,
       maxSize: 1000000,
       hidePathInfo: true
-    },
-    runtimeChunk: {
-      name: 'hue'
     }
   },
   output: {
     path: __dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/hue',
-    filename: '[name]-bundle-[hash].js',
-    chunkFilename: '[name]-chunk-[hash].js'
+    filename: '[name]-bundle-[fullhash].js',
+    chunkFilename: '[name]-chunk-[fullhash].js',
+    clean: true
   },
   performance: {
     maxEntrypointSize: 400 * 1024, // 400kb

部分文件因为文件数量过多而无法显示