bundle.js по-прежнему содержит функцию стрелки и параметры по умолчанию после использования babel pollyfill - PullRequest
Новая
       20

bundle.js по-прежнему содержит функцию стрелки и параметры по умолчанию после использования babel pollyfill

0 голосов
/ 24 апреля 2019

Я добавил много настроек, заданных Babel или другими из-за переполнения стека, но новые функции ES6, такие как функция стрелки и параметр по умолчанию, все еще находятся в моем bundle.js

В bundle.js есть содержимое, как показано ниже: 

    var nn = function(e={}) {
        const {baseClasses: t, newClasses: n, Component: r} = e;
        if (!n)
            return t;
        const a = At()({}, t);
        return Object.keys(n).forEach(e=>{
            n[e] && (a[e] = `${t[e]} ${n[e]}`)
        }
        ),
        a
    };

В результате, когда я открываю свою страницу в IE11, произошла ошибка missing ')', указывающая на function(e={}).

Вот мои webpack.config.js: 

const entries = require("./config/pages").reduce(function(map, page) {
  map[page] = `./src/${page}/index.js`;
  return map;
}, {});

module.exports = {
  mode: 'development',
  entry: ["@babel/polyfill",...entries],

  output: {
    path: path.resolve(__dirname,'dist'),
    publicPath: '/',
    filename: 'myapp/static/js/[name]/bundle.js'
  },
  devtool: 'source-map',
  module: require("./config/loaders"),
  devServer:{
    open: true,
    publicPath: '/',
    historyApiFallback: true,
    disableHostCheck: true
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),
    new webpack.ProvidePlugin({
        fetch: "isomorphic-fetch",
    })
  ]
};

и ./config/loaders для модуля 

module.exports = {
  rules: [
    {
      test: /\.(js|jsx)$/,
      // exclude: /node_modules/,
      loader: 'babel-loader',
    },
    {
      test: /\.(css|less)$/,
      use: ["style-loader", "css-loader", "less-loader"]
    },
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 500, //small than 500 use url, otherwise use base64
            outputPath:'inquiry/static/img/'
          }
        }
      ]
    },
    {
      test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
      use: [{
        loader: 'file-loader',
        options: {
          outputPath: 'myapp/static/fonts/'
        }
      }]

    }
  ]
};

.babelrc: 

{
  "presets": [
    // ["@babel/env",
    //   {
    //     "targets": {
    //       "browsers": "ie 11"
    //     },      
    //     "useBuiltIns": "usage",
    //     "corejs": "3.0.1",
    //   }
    // ],
    ["@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.0.1",
      }],
    "@babel/react"
  ],
  "plugins": [
    ["@babel/transform-runtime"],
    ["@babel/plugin-transform-parameters"],
    ["@babel/plugin-transform-arrow-functions"],
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
  ]
}

Кроме того, я импортировал '@ babel / polyfill' в свой index.js

PS: я заметил, что код содержит функции ES6 из библиотеки Meterial UI lib в node_modules, поэтому я удалил exclude: /node_modules/, в правиле загрузчика Babel, но оно все еще не работает.

1 Ответ

0 голосов
/ 24 апреля 2019

Мы нацелены на определенные браузеры в плагине @ babel / preset-env, определенном в babel.config.js (это еще один способ объявления конфигурации babel). 

    presets: [
        [
            '@babel/preset-env',
            {
                modules: 'commonjs',
                useBuiltIns: 'entry',
                targets: {
                    chrome: '58',
                    firefox: '54',
                    ie: '11',
                    safari: '10',
                    opera: '44',
                    edge: '16'
                }
            }
        ],
        [
            '@babel/preset-react'
        ]
    ],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties'
    ]

Пожалуйста, попробуйте целевую декларацию, как я разместил выше. Мы используем babel / preset-env 7.3.1, и он corejs не является параметром конфигурации верхнего уровня.

Обновление

Мне удалось заставить его работать с тестовым проектом, в котором я пытался максимально соответствовать вашим настройкам. Вы можете использовать это для медленного добавления сложности и модулей, которые вы используете в своем проекте, чтобы изолировать проблему. Эта базовая настройка соответствует вашей и работает хорошо. Вы можете использовать это как отправную точку.

package.json 

{
  "name": "babel-transprile-error",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/plugin-transform-arrow-functions": "^7.2.0",
    "@babel/plugin-transform-parameters": "^7.4.3",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/polyfill": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.4.3",
    "babel-loader": "^8.0.5",
    "mini-css-extract-plugin": "^0.6.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  }
}

webpack.config.js 

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: ["@babel/polyfill", './src/page/index.js'],

    output: {
        path: path.resolve(__dirname,'dist'),
        publicPath: '/',
        filename: 'myapp/static/js/[name]/bundle.js'
    },
    devtool: 'source-map',
    module: require("./config/loaders.js"),
    devServer:{
        open: true,
        publicPath: '/',
        historyApiFallback: true,
        disableHostCheck: true
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new webpack.ProvidePlugin({
            fetch: "isomorphic-fetch",
        })
    ]
};

.babelrc 

{
  "presets": [
    // ["@babel/env",
    //   {
    //     "targets": {
    //       "browsers": "ie 11"
    //     },
    //     "useBuiltIns": "usage",
    //     "corejs": "3.0.1",
    //   }
    // ],
    ["@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.0.1",
      }],
    "@babel/react"
  ],
  "plugins": [
    ["@babel/transform-runtime"],
    ["@babel/plugin-transform-parameters"],
    ["@babel/plugin-transform-arrow-functions"],
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
  ]
}

SRC / страница / index.js 

import React, { Component } from 'react';

class someComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    method(e = {}) {
        console.log(e);

        var nn = function(e={}) {
            const {baseClasses: t, newClasses: n, Component: r} = e;
            if (!n)
                return t;
            const a = At()({}, t);
            return Object.keys(n).forEach(e=>{
                    n[e] && (a[e] = `${t[e]} ${n[e]}`)
                }
            ), a
        };
    }

    render() {
        return (
            <div onClick={ e => { this.method(e) }}/>
        )
    }
}

export default someComponent;

конфиг / loaders.js 

module.exports = {
    rules: [
        {
            test: /\.(js|jsx)$/,
            // exclude: /node_modules/,
            loader: 'babel-loader',
        },
        {
            test: /\.(css|less)$/,
            use: ["style-loader", "css-loader", "less-loader"]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 500, //small than 500 use url, otherwise use base64
                        outputPath:'inquiry/static/img/'
                    }
                }
            ]
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    outputPath: 'myapp/static/fonts/'
                }
            }]

        }
    ]
};
...