Бабель не переносит ES6 в ES5

Question

Я отчаянно пытаюсь получить свой конфигурационный файл Webpack для переноса ES6 в ES5, но по некоторым причинам он, похоже, не работает. Я все еще получаю переменную 'const', функции стрелок и операторы распространения в моем экспортированном коде js. Я приложил мой файл конфигурации webpack и мой пакет. json файл - любая помощь будет очень признательна.

Package. json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development webpack --mode development",
    "build:prod": "cross-env NODE_ENV=production webpack --mode production",
    "start": "webpack-dev-server --port 9000 --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.7.7",
    "@babel/runtime": "^7.8.4",
    "autoprefixer": "^9.7.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "cross-env": "^6.0.3",
    "css-loader": "^3.4.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^6.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.0",
    "typescript": "^3.7.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.8.3",
    "@glidejs/glide": "^3.4.1",
    "aos": "^3.0.0-beta.6",
    "axios": "^0.19.2",
    "core-js": "2",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "query-string": "5.1.1",
    "scrollbooster": "^2.1.0",
    "simple-parallax-js": "^5.2.0",
    "smooth-scrollbar": "^8.5.1",
    "tippy.js": "^5.1.4"
  }
}

Конфигурация Webpack:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const data = require('../pageinfo.json');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {

    entry: ['@babel/polyfill','./src/scripts/index.js'],

    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[chunkhash].js'
    },

    module: {
        rules: [{
                test: [/.css$|.scss$/],
                use: [MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(jpe?g|png|svg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/images'
                    }
                }]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [["@babel/preset-env", { "useBuiltIns": "usage" }]],
                        plugins: [
                            ["@babel/plugin-transform-runtime",
                                {
                                    "regenerator": true
                                }
                            ]
                        ]
                    }
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/fonts'
                    }
                }]
            }
        ]
    },

    resolve: {
        extensions: ['.js']
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        new CopyWebpackPlugin([{
            from: './src/assets/images',
            to: 'assets/images'
        }]),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'style.[chunkhash].css'
        })
    ]

};

Answer 1

Go в ваш пакет. json файл. Команда babel принимает два аргумента: путь к вашему коду ES6 и путь, по которому вы хотите, чтобы ваш код ES5 был go.

Если у вас есть весь ваш код JavaScript, размещенный в каталоге, то вы Можно добавить флаг -d к команде, чтобы сообщить Бабелю о поиске каталогов вместо файлов. Для моего примера у меня есть JavaScript код в моем каталоге sr c, но я хочу, чтобы мой код ES5 был помещен в каталог сборки.

// package.json
...
"scripts": {
  "build": "babel src -d build",
},
...

Затем просто запустите команду Babel

Создав файл .babelr c и подготовив команду сборки, просто запустите его в командной строке.

 npm run build