Babel 没有将 ES6 转换为 ES5答案

【问题标题】：Babel isn't transpiling ES6 to ES5Babel 没有将 ES6 转换为 ES5
【发布时间】：2020-05-29 06:36:49
【问题描述】：

我正在拼命尝试让我的 Webpack 配置文件将 ES6 转换为 ES5，但由于某种原因它似乎不起作用。我仍然在导出的 js 代码中获得“const”变量、箭头函数和扩展运算符。我已附上我的 webpack 配置文件和 package.json 文件 - 任何帮助将不胜感激。

包.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'
        })
    ]

};

【问题讨论】：

你的 package.json 中需要一个 babel 配置文件或 babel 配置属性 - babeljs.io/docs/en/config-files
就像@colecmc 说的，你需要配置babel。这是一个教程：medium.com/@SunnyB/… 您似乎缺少 .babelrc 文件？还有你的构建命令是什么？
您必须将babel.config.js 文件添加到您的项目根目录。
对不起，我的印象是你可以使用 babel-loader 将 babel 配置设置导入 Webpack？
只是为了仔细检查 - 这不是做同样的事情吗？ webpack.js.org/loaders/babel-loader

标签： javascript webpack ecmascript-6

【解决方案1】：

转到您的 package.json 文件。 babel 命令有两个参数：ES6 代码路径和 ES5 代码路径。

如果你的所有 JavaScript 代码都存放在一个目录中，那么你可以在命令中添加 -d 标志来告诉 Babel 查找目录而不是文件。对于我的示例，我的 src 目录中有我的 JavaScript 代码，但希望将我的 ES5 代码放在构建目录中。

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

然后只需运行 Babel 命令

创建 .babelrc 文件并准备好构建命令后，只需在命令行中运行它即可。

 npm run build

【讨论】：