Upgrade code by DeepSeek V3

Author: alanpeng

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime"],
   "comments": false
 }

.gitignore

@@ -8,3 +8,4 @@ test/e2e/reports
 .idea
 *.iml
 .vscode
+.aider*

build/build.js

@@ -1,35 +1,53 @@
-// https://github.com/shelljs/shelljs
-require('shelljs/global')
-env.NODE_ENV = 'production'
-
-var path = require('path')
-var config = require('../config')
-var ora = require('ora')
-var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
-
-console.log(
-  '  Tip:\n' +
-  '  Built files are meant to be served over an HTTP server.\n' +
-  '  Opening index.html over file:// won\'t work.\n'
-)
-
-var spinner = ora('building for production...')
+const path = require('path')
+const { execSync } = require('child_process')
+const ora = require('ora')
+const webpack = require('webpack')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('Building for production...')
 spinner.start()
 
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-cp('-R', 'static/', assetsPath)
+// Clean dist directory
+execSync('rm -rf dist')
+execSync('mkdir -p dist')
+
+// Copy static assets
+execSync('cp -R static/* dist/')
 
-webpack(webpackConfig, function (err, stats) {
+const compiler = webpack(webpackConfig)
+
+compiler.run((err, stats) => {
   spinner.stop()
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n')
+  
+  if (err) {
+    console.error(err.stack || err)
+    if (err.details) {
+      console.error(err.details)
+    }
+    process.exit(1)
+  }
+
+  const info = stats.toJson()
+
+  if (stats.hasErrors()) {
+    console.error(info.errors)
+    process.exit(1)
+  }
+
+  if (stats.hasWarnings()) {
+    console.warn(info.warnings)
+  }
+
+  console.log(
+    stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    })
+  )
+
+  console.log('\nBuild complete!')
+  console.log('Files output to:', path.resolve(__dirname, '../dist'))
 })

build/dev-server.js

@@ -1,65 +1,38 @@
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var config = require('../config')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  stats: {
-    colors: true,
-    chunks: false
-  }
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    hotMiddleware.publish({ action: 'reload' })
-    cb()
-  })
-})
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
+const path = require('path')
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const webpackConfig = require('./webpack.dev.conf')
+
+const compiler = webpack(webpackConfig)
+const port = process.env.PORT || 8080
+
+const devServerOptions = {
+  ...webpackConfig.devServer,
+  open: true,
+  historyApiFallback: true,
+  client: {
+    overlay: {
+      errors: true,
+      warnings: false
+    },
+    progress: true
+  },
+  static: {
+    directory: path.join(__dirname, '../static')
   }
-  app.use(proxyMiddleware(context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
+}
 
-// serve webpack bundle output
-app.use(devMiddleware)
+const server = new WebpackDevServer(devServerOptions, compiler)
 
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
+const runServer = async () => {
+  console.log('Starting dev server...')
+  await server.startCallback(() => {
+    console.log(`Dev server is running at http://localhost:${port}`)
+    console.log('Waiting for initial build...')
+  })
+}
 
-module.exports = app.listen(port, function (err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-  console.log('Listening at http://localhost:' + port + '\n')
+runServer().catch(err => {
+  console.error('Failed to start dev server:', err)
+  process.exit(1)
 })

build/utils.js

@@ -1,6 +1,6 @@
 var path = require('path')
 var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 exports.assetsPath = function (_path) {
   return path.posix.join(config.build.assetsSubDirectory, _path)
@@ -11,21 +11,25 @@ exports.cssLoaders = function (options) {
   // generate loader string to be used with extract text plugin
   function generateLoaders (loaders) {
     var sourceLoader = loaders.map(function (loader) {
-      var extraParamChar
+      var loaderObj = {}
       if (/\?/.test(loader)) {
-        loader = loader.replace(/\?/, '-loader?')
-        extraParamChar = '&'
+        loaderObj.loader = loader.replace(/\?/, '-loader?')
+        if (options.sourceMap) {
+          loaderObj.options = { sourceMap: true }
+        }
       } else {
-        loader = loader + '-loader'
-        extraParamChar = '?'
+        loaderObj.loader = loader + '-loader'
+        if (options.sourceMap) {
+          loaderObj.options = { sourceMap: true }
+        }
       }
-      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
+      return loaderObj
+    })
 
     if (options.extract) {
-      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+      return [MiniCssExtractPlugin.loader].concat(sourceLoader)
     } else {
-      return ['vue-style-loader', sourceLoader].join('!')
+      return ['vue-style-loader'].concat(sourceLoader)
     }
   }
 

build/webpack.base.conf.js

@@ -1,9 +1,11 @@
-var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
+const path = require('path')
+const config = require('../config')
+const utils = require('./utils')
+const { VueLoaderPlugin } = require('vue-loader')
 var projectRoot = path.resolve(__dirname, '../')
 
 module.exports = {
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   entry: {
     app: './src/main.js'
   },
@@ -13,8 +15,7 @@ module.exports = {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.js', '.vue'],
-    fallback: [path.join(__dirname, '../node_modules')],
+    extensions: ['.js', '.vue'],
     alias: {
       vue: 'vue/dist/vue.js',
       'src': path.resolve(__dirname, '../src'),
@@ -28,72 +29,74 @@ module.exports = {
     }
   },
   resolveLoader: {
-    fallback: [path.join(__dirname, '../node_modules')]
+    modules: [path.join(__dirname, '../node_modules')]
   },
+  plugins: [
+    new VueLoaderPlugin()
+  ],
   module: {
-    noParse: /.npminstall\/localforage\/1.4.3\/localforage\/dist\/localforage.js/,    
-    preLoaders: [
+    rules: [
       {
         test: /\.vue$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
-      // {
-      //   test: require.resolve('jsplumb'),
-      //   loaders: [
-      //     'imports?this=>window',
-      //     'script'
-      //   ]
-      // },
-      {
-        test: /\.vue$/,
-        loader: 'vue'
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
       },
       {
         test: /\.js$/,
-        loader: 'babel',
+        loader: 'babel-loader',
         include: projectRoot,
         exclude: /node_modules/
       },
       {
         test: /\.json$/,
-        loader: 'json'
+        type: 'json'
       },
       {
         test: /\.html$/,
-        loader: 'vue-html'
+        loader: 'html-loader'
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        type: 'asset/resource',
+        generator: {
+          filename: utils.assetsPath('img/[name].[hash:7].[ext]')
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        type: 'asset/resource',
+        generator: {
+          filename: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          process.env.NODE_ENV !== 'production'
+            ? 'vue-style-loader'
+            : MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          process.env.NODE_ENV !== 'production'
+            ? 'vue-style-loader'
+            : MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass')
+            }
+          }
+        ]
       }
     ]
-  },
-  eslint: {
-    formatter: require('eslint-friendly-formatter')
-  },
-  vue: {
-    loaders: utils.cssLoaders()
   }
 }