NativeScript-Vue+TypeScript构建报错：UglifyJs语法错误与loader加载失败

问题根源分析 #

你遇到的第一个UglifyJs错误，核心原因是Webpack 3自带的UglifyJsPlugin仅支持ES5语法，而代码里的箭头函数h => h(...)属于ES6语法，没有被转译为ES5，导致Uglify无法解析。

你后续尝试用babel-loader!ts-loader链式加载的思路方向是对的，但配置方式错误，才出现了“找不到模块”的报错——因为你可能错误地把loader链写在了entry字段里，而不是在module.rules中正确配置loader规则。

分步解决方案 #

1. 修正TypeScript编译配置（tsconfig.json）

先确保TypeScript本身会把代码转译为ES5，打开tsconfig.json，修改compilerOptions：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowJs": true
  },
  "include": ["src/**/*"]
}

• target: "es5" 是关键，让TypeScript把ES6+语法转成ES5。

2. 正确配置Webpack的Loader规则

打开webpack.config.js，在module.rules中添加针对.ts文件的处理规则，不要把loader链写在entry里：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // 处理TypeScript文件：先ts-loader编译，再babel-loader转译剩余ES6语法
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          'ts-loader'
        ]
      },
      // 你的其他loader规则（比如vue、css等）...
    ]
  },
  // 确保resolve扩展名包含.ts
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json']
  },
  // ...其他配置
};

• Webpack loader的执行顺序是从右到左，所以先执行ts-loader把TypeScript转成JavaScript，再执行babel-loader处理剩余的ES6语法（比如object rest spread，你已经安装了对应的插件）。

3. 验证Babel配置（.babelrc或babel.config.js）

确保你的Babel配置能正确转译ES6到ES5，比如创建.babelrc文件：

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": ["transform-object-rest-spread"]
}

4. 修正Entry配置

你的entry字段应该指向项目的入口文件（比如./src/main.ts），而不是loader链：

module.exports = {
  entry: './src/main.ts',
  // ...其他配置
};

额外检查点 #

• 确认babel-loader和ts-loader都已经正确安装（你的package.json里已经有这两个依赖，没问题）。
• 如果你仍然遇到UglifyJs问题，可以考虑升级uglifyjs-webpack-plugin到支持ES6的版本（不过Webpack 3配合ES5代码更稳妥）。

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