WebHU - Programozási kérdések és válaszok

Nem sikerült megoldani az IE 8 várható azonosítóval kapcsolatos problémáját a webcsomagban

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


  • Az kizárás állítólag egy reguláris kifejezés, de Ön a path.join(__dirname, '/node_modules/') parancsot adja meg, lehet, hogy ez a probléma 07.12.2016
  • Megpróbáltam megváltoztatni az kizárás beállítást az „exclude : /node_modules/” értékre. De ennek ellenére a node_modules-ban található plotly.js fájl catch utasításában várt azonosító hibát ad. 07.12.2016
  • kétszer adtál betöltőt a js-hez. 07.12.2016
  • a betöltő neve is 'babel-loader' nem 'babel'. Nem tudom, hogy ez más böngészőknél hogyan működik 07.12.2016
  • Szia, nikhil! Eltávolítottam a 2. betöltőt, de még mindig ezt a hibát adja az IE 8 konzolban. Várható azonosítóhiba a nodemodules plotly.js-ben található catch utasítás néhány soránál. 07.12.2016
  • babelrc-t használsz 07.12.2016
  • Nem, nem babelrc-et használok. 07.12.2016
  • akkor hogyan használod a babel-plugin-transform-es3-property-literals-t. Úgy értem, hogy mondod a Babelnek, hogy használja ezeket a bővítményeket. Ennek három módja van, lásd itt 07.12.2016
  • A babel-plugin-transform-es3-property-literals babel loadert használom. Ez nem fog működni? 07.12.2016
  • nem nézd meg a linket, amit a fenti megjegyzésben adtam, meg kell mondanod a babelnek, hogy használja a bővítményeket. 07.12.2016
  • Frissítettem a babel-core-omat ^6.0.0-ra és a babel-loader-emet ^6.0.0-ra .és tudom, hogy a babelrc-t is használom, de még mindig jön a hiba. -member-expression-literals,transform-es3-modules-literals] } 07.12.2016
  • A makewebpackconfig loader konfigurációja a következő: { teszt: /\.js$/, // Az összes szükséges .js fájl átalakítása valahol egy belépési ponton belül... loader: 'babel', // ...a megadott betöltőkkel... kizár: /node_modules/, query : { presets : ['es2015','react'] }, babelrc : true } 07.12.2016
  • biztos vagy benne, hogy a loader: 'babel' működik, próbáld megváltoztatni loader: 'babel-loader'-re 07.12.2016

Új anyagok

A rádiógomb ellenőrzött eseményének használata a jQueryben
Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...

Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..

Miért érdemes elkezdeni a kódolást 2023-ban?
01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..

🎙 Random Noise #2  – Örökbefogadás és hit
az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..

A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..

5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..

Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..