2

I am using webpack in my project and the project has to be run on IE8 enterprise mode.I used following babel loaders to transform to es3

transform-es3-member-expression-literals transform-es3-property-literals

suggested by this answer : Babel 6.0.20 Modules feature not work in IE8

I tried babel-polyfill,transform runtime also.But nothing seems to be working.

My makewebpackconfig file looks like this:

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
}

}

I am making some mistake ,but unable to find it.Can anyone suggest a way out of this problem?

Note : I am excluding node modules in babel loader.I can see the error in plotly.js file included in nodemodules.Following error are seen in console when opening in enterprise mode IE11 and enterprise node IE8 Expected identifier at line xxxx. On clicking on the error it takes to catch statement in bundle.js. Thanks

Community
  • 1
  • 1
simbathesailor
  • 3,681
  • 2
  • 19
  • 30
  • exclude is supposed to be a regex but you are giving path.join(__dirname, '/node_modules/') may be this is the problem – nikhil mehta Dec 07 '16 at 07:44
  • I tried changing exclude option to 'exclude : /node_modules/.But still it gives expected identifier error on catch statement in plotly.js file in node_modules. – simbathesailor Dec 07 '16 at 08:16
  • you have given loader for js twice. – nikhil mehta Dec 07 '16 at 09:24
  • also the loader name is 'babel-loader' not 'babel'. Don't know how this is working for other browsers – nikhil mehta Dec 07 '16 at 09:49
  • Hi nikhil, I have removed the 2nd loader,but still it gives this error in IE 8 console.Expected identifier error comes for some line with catch statement in plotly.js in nodemodules. – simbathesailor Dec 07 '16 at 09:49
  • are you using babelrc – nikhil mehta Dec 07 '16 at 09:54
  • No ,I am not using babelrc. – simbathesailor Dec 07 '16 at 10:01
  • then how are you using babel-plugin-transform-es3-property-literals. I mean how are you telling babel to use these plugins. There are three ways to do this see [here](http://babeljs.io/docs/plugins/transform-es3-member-expression-literals/) – nikhil mehta Dec 07 '16 at 10:05
  • I am using babel-plugin-transform-es3-property-literals is babel loader. Will that not work ? – simbathesailor Dec 07 '16 at 10:17
  • no see the link I provided in above comment you have to tell babel to use the plugins. – nikhil mehta Dec 07 '16 at 10:42
  • I upgraded my babel-core to ^6.0.0 and babel-loader to ^6.0.0 .and know using babelrc also but still the error comes My babelrc content is { "plugins": ["transform-es3-property-literals","transform-es3-member-expression-literals","transform-es3-modules-literals"] } – simbathesailor Dec 07 '16 at 11:08
  • makewebpackconfig loader config is like this { test: /\.js$/, // Transform all .js files required somewhere within an entry point... loader: 'babel', // ...with the specified loaders... exclude: /node_modules/, query : { presets : ['es2015','react'] }, babelrc : true } – simbathesailor Dec 07 '16 at 11:10
  • are you sure loader: 'babel' works try changing it to loader: 'babel-loader' – nikhil mehta Dec 07 '16 at 11:50

0 Answers0