[英]Webpack, IE8 and ES6 modules
最新版本的webpack不支持IE8。 我已经尝试使用1.12.12(我相信它是支持IE8的最新版本),但仍然从无法填充的Object.defineProperty
得到错误。
https://github.com/webpack/webpack/issues/2085
最新的支持IE8的webpack是什么? 它曾经与ES6模块一起使用吗?
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
,但是可以通过使用宽松模式进行配置。
// 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;
/***/ }
/******/ ])
从讨论中可以解决您的问题:
1.13.0于2016年4月15日发布。因此看来这应该可行。 您确定您自己的应用程序代码中没有使用getter / setter方法吗? 也许您可以只使用一个hello world示例代码创建一个超级简单的示例,然后尝试使用1.13版本创建一个构建。 这样创建的代码不应该使用Object.defineProperty
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.