es6代码不再打包为es5

最近，因为业务需要，终于摆脱了IE，彻底投入chrome怀抱，不用再考虑各种兼容性问题。

vue改造

主项目使用的vue，痛苦的是代码中的async/await被编译后，堆栈复杂难追，太对不起chrome对es6的支持了。 碎碎念了一段时间，这两天终于有时间看了下。其实挺简单，把babel配置的presets去掉就好了，之后是plugins缺什么补什么。

这是我项目中例子：

module.exports = {
    // presets: [
    //     '@vue/app',
    // ],
    plugins: [
        '@babel/plugin-proposal-optional-chaining',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-syntax-dynamic-import'
    ],
};

另一种方案，修改根目录下的.browserslistrc文件：

last 2 Chrome versions

这种更稳妥一些。

rollup改造

还有个老项目，直接用rollup打包的，也是一样修改（它的presets用的是@babel/preset-env）。 但有个问题，开发时还好，发布时因为要压缩，我使用的是rollup-plugin-uglify。这个插件不支持压缩es6。 试了下webpack，它可以，我甚至想要用它把rollup替换掉了。 看了下rollup-plugin-uglify的源码，它底层调用的是uglify-js来压缩，修改为uglify-es就可以了。 想着发布个插件吧，没想到看到人家说明文档里面这句：

Note: uglify-js is able to transpile only es5 syntax. If you want to transpile es6+ syntax use terser (opens new window) instead

改用rollup-plugin-terser就可以了。 大写的尴尬！以后还是要多看README。

gulp改造

gulp也类似，这次学乖了，先看的文档。 我用的是插件是：gulp-uglify。原来是这样写的：

const uglify = require('gulp-uglify');
...

api里有个例子：

const uglifyEs  = require('uglify-es');
const composer = require('gulp-uglify/composer');
const uglify = composer(uglifyEs, console);
...

当然，在npm上发现还有个插件叫：gulp-terser。 又叫terser！ 早该想到的！