Webpacket használok a projektemben, és a projektet IE8 vállalati módban kell futtatni. A következő babel betöltőket használtam az es3-ra való átalakuláshoz
transform-es3-member-expression-literals transform-es3-property-literals
ezt a választ javasolta: Babel 6.0. A 20 modul funkció nem működik az IE8 alatt
Kipróbáltam a babel-polyfill-t, a futásidejű átalakítást is. De úgy tűnik, semmi sem működik.
A makewebpackconfig fájlom így néz ki:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AppCachePlugin = require('appcache-webpack-plugin');
var appConfigObj = require('./server.js');
var appPort = 3000;
// var es3MemberExpressionLiterals = require('babel-plugin-transform-es3-member-expression-literals');
// var es3PropertyLiterals = require('babel-plugin-transform-es3-property-literals');
var es3ifyPlugin = require('es3ify-webpack-plugin');
var appHost = '11.126.44.112';
module.exports = function(options) {
var entry, jsLoaders, plugins, cssLoaders, devtool;
console.log('options webconfig-->', options, 'directory name', __dirname);
// If production is true
if (options.prod) {
console.log('producaiton minifcation');
// Entry
entry = [
// 'babel-polyfill',
path.resolve(__dirname, 'js/app.js') // Start with js/app.js...
];
cssLoaders = ['file-loader?name=[path][name].[ext]', 'postcss-loader'];
// Plugins
plugins = [ // Plugins for Webpack
// new es3ifyPlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: false
}),
new HtmlWebpackPlugin({
template: 'index.html', // Move the index.html file...
minify: { // Minifying it while it is parsed using the following, self–explanatory options
removeComments: false,
collapseWhitespace: false,
removeRedundantAttributes: false,
useShortDoctype: false,
removeEmptyAttributes: false,
removeStyleLinkTypeAttributes: false,
keepClosingSlash: true,
minifyJS: false,
minifyCSS: true,
minifyURLs: false
}
})
// new es3MemberExpressionLiterals(),
// new es3PropertyLiterals()
];
// If app is in development
} else {
devtool = 'cheap-source-map';
// Entry
entry = [
// 'babel-polyfill',
"webpack-dev-server/client?http://localhost:3000", // Needed for hot reloading
"webpack/hot/only-dev-server", // See above
path.resolve(__dirname, 'js/app.js') // Start with js/app.js...
];
cssLoaders = ['style-loader', 'css-loader', 'postcss-loader'];
// Only plugin is the hot module replacement plugin
plugins = [
// new es3ifyPlugin(),
new webpack.HotModuleReplacementPlugin() // Make hot loading work
// new es3MemberExpressionLiterals(),
// new es3PropertyLiterals()
]
}
return {
devtool: devtool,
entry: entry,
output: { // Compile into js/build.js
path: path.resolve(__dirname, 'build'),
filename: "js/bundle.js"
},
module: {
loaders: [{
test: /\.js$/, // Transform all .js files required somewhere within an entry point...
loader: 'babel', // ...with the specified loaders...
exclude: path.join(__dirname, '/node_modules/'), // ...except for the node_modules folder.
plugins: [
// 'transform-runtime',
'babel-plugin-transform-es3-property-literals',
'babel-plugin-transform-es3-member-expression-literals',
]
}, {
test: /\.css$/, // Transform all .css files required somewhere within an entry point...
loaders: cssLoaders // ...with PostCSS
}, {
test: /\.jpe?g$|\.gif$|\.png$/i,
loader: "url-loader?limit=100000"
}, {
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}, {
test: /\.js$/,
exclude: /node_modules/,
loaders: ['es3ify', 'babel'],
}]
},
plugins: plugins,
postcss: function() {
return [
require('postcss-import')({ // Import all the css files...
onImport: function(files) {
files.forEach(this.addDependency); // ...and add dependecies from the main.css files to the other css files...
}.bind(this) // ...so they get hot–reloaded when something changes...
}),
require('postcss-simple-vars')(), // ...then replace the variables...
require('postcss-focus')(), // ...add a :focus to ever :hover...
require('autoprefixer')({ // ...and add vendor prefixes...
browsers: ['last 2 versions', 'IE > 8'] // ...supporting the last 2 major browser versions and IE 8 and up...
}),
require('postcss-reporter')({ // This plugin makes sure we get warnings in the console
clearMessages: true
})
];
},
target: "web", // Make web variables accessible to webpack, e.g. window
stats: false, // Don't show stats in the console
progress: true
}
}
Valami hibát követek el, de nem találom. Tud valaki javasolni kiutat ebből a problémából?
Megjegyzés: Kizárom a csomópontmodulokat a babel loaderben. Látom a hibát a nodemodules-ban található plotly.js fájlban. A következő hiba jelenik meg a konzolban, amikor vállalati módban IE11 és vállalati csomópont IE8 nyit. Várt azonosító a xxxx sorban. A hibára kattintva el kell fogni a bundle.js-ben található utasítást. Kösz