首页 > 解决方案 > Babel 设置错误:“./src/js/index.js 中的错误”

问题描述

更新:我解决了这个问题。看答案。

目标:设置 Babel。

问题:当我使用 webpack 使用命令创建 bundle.js 文件时遇到错误:npm run dev. 截图1 截图2

./src/js/index.js

import num from "./test";
const x = 45;
console.log(`I imported ${num} from test.js - ${x}`);

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: ["babel-polyfill", "./src/js/index.js"],
    output: {
        path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js"
    },
    devServer: {
    contentBase: "./dist"
    },
    plugins: [
    new HtmlWebpackPlugin({
        filename: "index.html",
        template: "./src/index.html"
    })
    ],
    module: {
    rules: [ 
        {
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: { 
            loader: "babel-loader"
                }
        }
        ]
    }
};

标签: javascriptwebpackbabeljs

解决方案


我修复了错误。原来我需要安装新的 Babel 包。

npm install --save-dev @babel/core @babel/preset-env
npm install --save @babel/polyfill

entry在 webpack.config.js 中替换为:

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

presets在 .babelrc 中替换为:

{
  "presets": ["@babel/env"]
}

推荐阅读