使用Typescript+Framework7+Webpack构建时遇UglifyJs报错求助

Hey there, let's tackle that UglifyJs error you're hitting when building your f7-cnode project. I've dealt with similar compatibility issues between these tech stacks before, so here are actionable steps to resolve it:

1. Swap UglifyJs for Terser (ES6+ Compatible Minifier) #

Older versions of uglifyjs-webpack-plugin don't support ES6+ syntax, which is likely the root problem—either your TypeScript output isn't fully ES5, or Framework7/Dom7 includes untranspiled ES6 code. Terser is the official Webpack-recommended replacement for modern code minification:

• First, install the plugin:

  npm install terser-webpack-plugin --save-dev
  

• Update your build/webpack.config.js to replace UglifyJs with Terser:

  const TerserPlugin = require('terser-webpack-plugin');
  
  module.exports = {
    // ...rest of your existing config
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: 5, // Force output to ES5 to match your project's target
            compress: {
              drop_console: true, // Optional: Strip console logs for production builds
            },
            mangle: true,
          },
        }),
      ],
    },
  };
  

2. Ensure TypeScript Compiles to ES5 #

Double-check your tsconfig.json to confirm TypeScript is emitting ES5 code—this is critical for compatibility with your project's ES5 target:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext", // Or CommonJS, depending on your project setup
    // ...other existing config options
  }
}

3. Transpile Framework7 & Dom7 in Webpack #

Webpack often skips transpiling node_modules by default, but Framework7 and Dom7 might include untranspiled ES6 code. Update your loader rule to include these packages in transpilation:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // Don't exclude Framework7/Dom7 from transpilation
        exclude: /node_modules\/(?!(framework7|dom7)\/)/,
        use: 'babel-loader',
      },
      // Your TypeScript loader rule here, e.g.:
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

4. Verify Webpack Mode & Environment Alignment #

Your build command sets NODE_ENV=production, but make sure your Webpack config respects this mode to avoid conflicting minification settings:

module.exports = {
  mode: process.env.NODE_ENV || 'development',
  // ...rest of your existing config
};

5. Update Dependencies to Resolve Compatibility Bugs #

Outdated versions of Framework7, Webpack, or TypeScript could be causing hidden compatibility issues. Run these commands to update to stable, compatible versions:

npm update framework7 dom7 webpack typescript terser-webpack-plugin

If you're still hitting errors after trying these steps, share the full UglifyJs error message (including the specific syntax it's complaining about)—that will help narrow down the exact issue even faster.

内容的提问来源于stack exchange，提问作者mishke