如何将 ES6 转换为 ES5 以用于 3rd 方库？答案

【问题标题】：How to transpile ES6 to ES5 for 3rd party libs?如何将 ES6 转换为 ES5 以用于 3rd 方库？
【发布时间】：2018-03-11 10:02:11
【问题描述】：

我有一个几乎可以正常工作的 webpack 设置，但是当我导入一些用 ES6 编写的第 3 方库时，我看到 UglifyJS 发出一个错误。以下是来自node-postgres 的示例：

module.exports = {
  prepareValue: function prepareValueWrapper (value) {
    // this ensures that extra arguments do not get passed into prepareValue
    // by accident, eg: from calling values.map(utils.prepareValue)
    return prepareValue(value)
  },
  normalizeQueryConfig,
  postgresMd5PasswordHash,
  md5
}

这是它在 ES5 中的外观：

module.exports = {
  prepareValue: function prepareValueWrapper (value) {
    // this ensures that extra arguments do not get passed into prepareValue
    // by accident, eg: from calling values.map(utils.prepareValue)
    return prepareValue(value)
  },
  normalizeQueryConfig: normalizeQueryConfig,
  postgresMd5PasswordHash: postgresMd5PasswordHash,
  md5: md5
}

当原始代码被UglifyJS处理时，我看到这个错误：

来自 UglifyJs 的 proxy.js 中的错误

意外令牌：punc (,) [proxy.js:382,22]

哪个指向上面的代码。

当我正在编译一个 TypeScript 项目时，我怀疑我需要通过 Webpack 流中的一些转译器处理第 3 方库代码，以便在捆绑之前将它们转换为 ES5。

这是我的webpack.config.js：

const path = require('path');

const root = (dir) => {
    return path.resolve(__dirname, dir);
};

module.exports = {
    entry: './src/main.ts',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".js"],
        modules: [root('node_modules'), root('src')]
    },
    output: {
        filename: 'proxy.js',
        path: path.resolve(__dirname, 'build')
    },
    target: 'node'
};

我该怎么做？

【问题讨论】：

标签： node.js typescript webpack

【解决方案1】：

您可以使用uglify-es 来压缩您的ES6 代码，或者使用Babel 和ES2015 preset 将代码转译为ES5。

【讨论】：

如果您注意到，问题是“对于第 3 方库”。