Блог

Мне нужно использовать @babel/preset-env для устранения проблем с функциями js в ie11. Но когда babel добавляет необходимые модули в конкретные файлы js, такие как (импорт(‘module_path’)), браузеры их не понимают. Я использую gulp и webpack для настройки проекта. Я читал, что мне нужно настроить свой веб-пакет для использования импорта в браузере, но я не знаю, как это сделать.

Вот моя часть веб-пакета в моем проекте:

 webpack({
        entry: entry, // some custom libs are added here
        output: {
            path: 'general/lib',
            filename: "[name].min.js",
        },
        externals: {
            "underscore": "_"
        },
        resolveLoader: {
            modulesDirectories: ["node_modules", "node_modules_local"],
        },
        module: {
            loaders: getLoadersList(args)
        },
        plugins: getPluginsList(args)
    }, function(error, stats){

        var warnings = stats.compilation.warnings;
        var errors = stats.compilation.errors;

        if (errors.length) cb(errors[0].toString())
        // else if (warnings.length) cb(warnings[0].toString())
        else cb();
    });

function getLoadersList(opts) {

    var loaders = [
        {
            test: /.js$/,
            include: opts.uni ? [] : getIgnoreList(),
            loader: 'dummy'
        }
    ];

    if (!opts.no_filter) {
        loaders.push({
            test: /.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ["@babel/preset-env"],
                plugins: ["@babel/plugin-transform-runtime"]
            }
        });
    };

    return loaders;
};

function getPluginsList(opts) {
    var plugins = [
        new OnlyIfChangedPlugin({
            cacheDirectory: path.join('tmp/webpack_cache'),
            cacheIdentifier: 'app_modules'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "app-module-common",
            minChunks: 2
        })
    ];

    if (!opts.debug amp;amp; !opts.no_filter) {
        plugins.push(new webpack.optimize.UglifyJsPlugin({
            mangle: false
        }));
    };

    return plugins;
};
 

И вот мой вавилонский конфиг залпом:

 var pipeline = gulp.src(files, opts);
pipeline = pipeline.pipe(babel({
presets: [ [
        "@babel/preset-env",
        {
            modules: false,
            corejs:2,
            useBuiltIns:"usage", 
        }
      ] ],
    plugins: []
}));