Webpack，IE8和ES6模块 [英] Webpack, IE8 and ES6 modules

问题描述

最新版本的webpack不支持IE8。我试过1.12.12（我认为它是支持IE8的最后一个版本），但仍然从不可调整的 Object.defineProperty 中获得错误。

Recent versions of webpack do not support IE8. I have tried with 1.12.12 (which I believed was the last version to support IE8) but still get errors from the un-shimmable Object.defineProperty.

https://github.com/webpack/webpack/ issue / 2085

支持IE8的最后一个webpack版本是什么？它是否适用于ES6模块？

What was the last version of webpack to support IE8? Did it ever work with ES6 modules?

webpack.config.js：

webpack.config.js:

var webpack = require("webpack");
var es3ifyPlugin = require('es3ify-webpack-plugin');
var productionPlugin = new webpack.DefinePlugin({
    'process.env': {
        'NODE_ENV': JSON.stringify('production')
    }
});
var devPlugin = new webpack.DefinePlugin({
    "process.env": {
        NODE_ENV: JSON.stringify("dev")
    }
});

module.exports = {
    entry: {
        assessment: "./src/aaa/app.js"
    },
    //devtool: "source-map",
    output: {
        path: "../AAA/wwwroot/js",
        filename: "[name].bundle.js",
        publicPath: "/"
    },
    resolve: {
        extensions: ["", ".js"]
    },
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                loader: "eslint-loader",
                exclude: "node_modules"
            }
        ],
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                // todo: move less compiling to web project 
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader",
                exclude: "node_modules"
            },
        ]
    },
    devServer: {
        historyApiFallback: true,
        inline: true,
        proxy: {
            "/api": {
                "target": {
                    host: "localhost",
                    protocol: "http:",
                    port: "58211",
                },
                changeOrigin: true,
                pathRewrite: { "^/api": "" }
            }
        },
        publicPath: "/assets/"
    },
    plugins: [
        new es3ifyPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            minChunks: isExternal
        }),
        productionPlugin
        //devPlugin
    ]
}

function isExternal(module) {
    var userRequest = module.userRequest;

    if (typeof userRequest !== "string") {
        return false;
    }

    return userRequest.indexOf("node_modules") >= 0;
}

透明代码如下所示：

exports.test = '123';

webpackJsonp([1, 0], [

  function (module, exports, __webpack_require__) {

    'use strict';

    var _imported = __webpack_require__(1);


    alert('test ' + _imported.test);

    function(module, exports) {

        "use strict";

        Object.defineProperty(exports, "__esModule", {
            value: true
        });
        var test = exports.test = 123;

      }
  ]);

推荐答案

问题是babel默认情况下如何翻译ES2015代码。在默认（非松散）模式下，使用 Object.defineProperty ，但可以使用松散模式进行配置。

The problem is how babel translates ES2015 code by default. In the default (non-loose) mode it uses Object.defineProperty, but this can be configured by using loose-mode.

// webpack.config.js
module: {
   loaders: [
     {
       test: /\.js$/,
       loader: 'babel-loader',
       exclude: /node_modules/,
       query: {
         presets: [ ['es2015', {"loose": true}] ]
       }
     }
   ]
 }

这导致以下编译代码：

/* 0 */
/***/ function(module, exports, __webpack_require__) {

    'use strict';

    var _imported = __webpack_require__(1);

    var _imported2 = _interopRequireDefault(_imported);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

    console.log('test ' + _imported2.default);

/***/ },
/* 1 */
/***/ function(module, exports) {

    "use strict";

    exports.__esModule = true;
    var test = 123;

    exports.default = test;

/***/ }
/******/ ])

旧答案

从讨论中解决了您的问题：

Old answer

From the discussion as this has solved your issue:

< 2016年4月15日发布了一个href =https://github.com/webpack/webpack/commits/v1.13.0\"rel =nofollow noreferrer> 1.13.0 。所以看来这应该有效。您确定在自己的应用程序代码中没有使用getter / setter吗？也许您可以使用hello world示例代码创建一个超级简单示例，并尝试使用1.13版本创建构建。这样创建的代码不应该使用 Object.defineProperty 我想。

1.13.0 was released on 15th April 2016. So It seems that this should work. Are you sure that you're not using getters/setters within your own application code? Maybe you can create a super simple example with just a hello world sample code and try creating a build using the 1.13 version. The so created code should not use Object.defineProperty I guess.

这篇关于Webpack，IE8和ES6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！