如何将 Babel 转换为 es5 而不是 es5.1答案

【问题标题】：How to Babel transpile to es5 not es5.1如何将 Babel 转换为 es5 而不是 es5.1
【发布时间】：2018-02-15 08:55:27
【问题描述】：

我正在使用 npm、webpack 和 babel 在 es6 中编写我的库并进行转译 + 缩小。但是结果被转换为使用 Object (Object.defineProperty) 的 ecmaScript 5.1，但我的目标是不支持 Object 的 ecmaScript 5，或者如果发现其他限制，则降低 ecmaScript。（我需要的javascript版本是Rhino中使用的那个。）（我的目标是犀牛1.7R3）

我的问题是，如何配置 babel 来做到这一点？我发现了 polyfill，但我不确定如何使用它来实现我的目标。

babelrc

{  "presets": ["env"]  }

webpack.config

    module.exports = function(env, argv) {
    env = env || {};

    const webpack = require('webpack');
    const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

    let libraryName = 'jsgmc';
    let plugins = [], outputFile;

    if (env.prod) {
        plugins.push(new UglifyJsPlugin({minimize: true}));
        outputFile = libraryName + '.min.js';
    } else {
        outputFile = libraryName + '.js';
    }

    return {
        entry: __dirname + '/src/jsgmc.js',
        devtool: 'source-map',
        output: {
            path: __dirname + '/dist',
            filename: outputFile,
            library: libraryName,
            libraryTarget: 'this'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['babel-preset-env'],
                            plugins: [require('babel-plugin-add-module-exports')]
                        }
                    }
                }
            ]
        },
        plugins: plugins
    };

};

【问题讨论】：

嗯，只是想知道你为什么有这个要求？ Object.defineProperty 有什么问题？
@DanilGholtsman 因为我有一个基于 Rhino 构建的特定 FE 平台，我想创建函数库，可以被其他纯 javascript 或其他项目使用。
@DanilGholtsman 更准确地说，它必须符合旧版本的 Rhino，而不是实际版本，这就是为什么我需要 es5 而不是 es5.1
哦，我明白了，有趣的问题

标签： javascript npm webpack babeljs

【解决方案1】：

使用babel-preset-env 时，您可以使用配置选项来指定要支持的浏览器版本。

很遗憾，无法指定 Rhino，但如果针对的是非常旧的浏览器，您可以尝试，例如Internet Explorer 7，工作正常。

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["ie < 8"]
      }
    }]
  ]
}

使用名为browserslist 的模块解析配置选项。

您可以尝试browserslist在线查询here。

另一个可以帮助您的有用工具是compatibility table。

有趣的是，这表明 Rhino 1.7 确实支持Object.defineProperty。

【讨论】：

谢谢，这并没有解决我的问题，但这是我解决问题的良好开端。

【解决方案2】：

正如 Patrick 提到的，Rhino 1.7 及更低版本不支持 Object.defineProperty。对我来说合适的解决方案是使用这个简单的polyfil。请注意，此解决方案仅是可行的，因为我正在构建的库将不具有高级功能。否则，其他功能必须使用例如 sham es5 polyfill 进行填充，这是高度实验性的。（其等效 shim es5 不包含例如对象特征）

无法转译成 javascript 的子版本。它要么是 5.1，要么什么都没有。也可以使用闭包编译器（已经是旧工具）转译到以前的主要版本 es3，但这可能会导致一些重大问题，因为这是当今非常古老的 js 规范。

【讨论】：