Aurelia-bundler：打包时转译JSPM依赖以兼容Uglify的配置咨询

我之前也碰到过一模一样的坑！问题根源很明确：默认情况下aurelia-bundler使用的UglifyJS版本不支持ES6语法，当打包包含箭头函数这类ES6特性的依赖时，就会触发压缩错误。下面是我亲测有效的两种解决方案，优先推荐第一种：

方案一：配置aurelia-bundler转译指定依赖 #

这种方式最直接，就是告诉 bundler 在打包过程中把目标依赖转译成ES5，让Uglify能正常处理。

1. 打开你的项目配置文件 aurelia-project/aurelia.json，找到 bundles 节点下你要打包的目标bundle（比如app-bundle.js）。
2. 在该bundle的options里添加transpile配置，指定需要转译的依赖路径。假设出问题的依赖叫my-es6-dependency，配置示例如下：

"bundles": [
  {
    "name": "app-bundle.js",
    "source": [
      "**/*.js",
      "my-es6-dependency"
    ],
    "options": {
      "transpile": {
        "include": ["my-es6-dependency/**/*.js"]
      }
    }
  }
]

• include里的路径要匹配依赖的所有JS文件，用**来匹配子目录，确保所有包含ES6语法的文件都被转译。
• 如果有多个需要转译的依赖，在include数组里添加更多路径即可，比如["dep1/**/*.js", "dep2/**/*.js"]。

3. 确保你的项目转译器（一般是Babel）配置正确，比如.babelrc里要有@babel/preset-env预设，并且目标环境设置为能兼容Uglify的ES5版本：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ]
}

方案二：升级Uglify到支持ES6的版本 #

如果转译依赖的方式不适用，你可以尝试换用支持ES6的Uglify版本：

1. 安装支持ES6的Uglify包：

npm install uglify-js-es6 --save-dev

2. 修改aurelia-bundler的配置，指定使用这个新的Uglify版本。在aurelia.json的build节点下添加uglify配置：

"build": {
  "options": {
    "uglify": {
      "module": "uglify-js-es6",
      "options": {
        "compress": {},
        "mangle": {}
      }
    }
  }
}

不过这种方式可能会有兼容性问题，比如某些aurelia-bundler的版本可能对新版Uglify支持不好，所以优先推荐方案一。

额外注意点 #

• 先确认依赖是否本身提供了ES5版本：有些npm包会同时发布ES5和ES6版本，你可以通过JSPM指定安装ES5版本，比如jspm install npm:my-es6-dependency@^1.0.0#es5，这样就不用额外转译了。
• 打包前可以先单独检查那个依赖的代码，确认箭头函数的位置，确保转译配置覆盖到了对应的文件。

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