Babel преобразовывает не весь код в ES5

105
04 января 2020, 23:20

Настроен бейбел, все работает отлично, но на некоторых браузерах, не работает, так как несколько кусков код не траспайлятся, нашел один кусок код с arrow function.

Например вот два блока которые в бандле не превращены в es5,

function useCommittedRef(value) {
  var ref = (0, _react.useRef)(value);
  (0, _react.useLayoutEffect)(() => {
    ref.current = value;
  }, [value]);
  return ref;
}

2 код

function useEventCallback(fn) {
  const ref = (0, _useCommittedRef.default)(fn);
  return (0, _react.useCallback)(function (...args) {
    return ref.current(...args);
  }, [ref]);
}

Webpack

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let webpack = require('webpack');
module.exports = {
    devtool: 'cheap-module-source-map',
    entry: './src/index.jsx',
    output: {
        path: path.resolve('public'),
        filename: 'app-bundle.js',
        publicPath: process.env.CONTEXT
    },
    resolve: {
        extensions: ['.js', '.json', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.css$/, use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {modules: true,
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['babel-preset-env', 'react', ['es2015', { loose: true, modules: false }], 'stage-2', "transform-class-properties"]
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: require.resolve('style-loader'),
                    },
                    {
                        loader: require.resolve('css-loader'),
                    },
                    {
                        loader: require.resolve('sass-loader'),
                    },
                ]
            }
        ],
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'body',
            vendorsFilename: process.env.CONTEXT
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
                CONTEXT: JSON.stringify(process.env.CONTEXT)
            }
        })
    ],
    devServer: {
        historyApiFallback: { index: process.env.CONTEXT },
        host: 'localhost',
        port: 8081,
        contentBase: './',
    }
}

.babelrc

{
  "presets": [
    ["es2015"],
    "react",
    "stage-3"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}
Answer 1

Установите и пропишите в конфиге babelrc (или babel.config.js, или в webpack.config.js)

@babel/plugin-transform-arrow-functions

https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions

Answer 2

Необходимо добавить

import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/promise';
import 'core-js/stage/2';
import 'core-js/fn/object/assign';
import "isomorphic-fetch"
READ ALSO
Воспроизведение звука в старом IE на ПДА

Воспроизведение звука в старом IE на ПДА

Вводная: используются ПДА с системой Win Embedded 700, а на них работают через web-приложение в локалке на мобильном IE6

119
SVG полукруг разбить на 3 равные части

SVG полукруг разбить на 3 равные части

У меня приложение на Vuejs и мне нужно прогресс-бар создать

116
js проверка на куки

js проверка на куки

Хотел проверить с помощью js наличие куки на страничкепри правильном вводе данных в логине и пароле - куки создаются без проблем, но скрипт...

100
Vue router in select

Vue router in select

Решил поэкспериментировать с Vue, прочитал-узнал, что есть роутинг, решил попробовать, но, к сожалению, на select он не работаетЗадача была такая,...

199