IT技术 - “你可能需要一个合适的加载器来处理这种文件类型”与 Webpack 和 Babel - 吾爱随笔录

“你可能需要一个合适的加载器来处理这种文件类型”与 Webpack 和 Babel

IT技术 javascript webpack babeljs es6-module-loader

2021-02-02 19:46:23

我正在尝试使用 Webpack 和 Babel 来编译 ES6 资产，但收到以下错误消息：

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

这是我的 Webpack 配置的样子：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

这是使用 Webpack 的中间件步骤：

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express = require('express');
var app = express();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(err) {
  console.log('Server started on http://localhost:%s', port);
});

我的 index.js 文件所做的只是导入 react，但似乎 'babel-loader' 不起作用。

我正在使用 'babel-loader' 6.0.0。

6个回答

您需要安装es2015预设：

npm install babel-preset-es2015

然后配置babel-loader：

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

我已经安装了预设并安装了 babel-loader。它仍然给出相同的错误

2021-03-14 19:46:23

@nix86babel-loader是一个 npm module，而不是您编辑的文件。

2021-03-25 19:46:23

@UG_ 你找到解决方案了吗？

2021-03-27 19:46:23

我们应该配置的文件“babel-loader”文件在哪里？

2021-03-29 19:46:23

@UG_您必须提出一个单独的问题。我们需要查看您的整个配置和完整的错误消息。

2021-04-07 19:46:23

确保你已经安装了es2015 babel 预设。

一个示例package.json devDependencies 是：

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-loader": "^6.0.1",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15",
  "webpack": "^1.9.6",
  "webpack-dev-middleware": "^1.2.0",
  "webpack-hot-middleware": "^2.0.0"
},

现在在你的 webpack 配置中配置babel-loader：

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

将.babelrc文件添加到项目的根目录，其中节点module是：

{
  "presets": ["es2015", "stage-0", "react"]
}

更多信息：

. babelrc 文件是我所缺少的，谢谢！这是完整的教程，接受的答案只能让您到此为止。

2021-03-16 19:46:23

旁注：对选项中的“stage-0”不太确定（也可以在 .babelrc 中进行配置）：某些功能可能未包含在官方 ES 标准中，因此我通常使用更安全的“stage-3”。

2021-04-03 19:46:23

如果您使用的是 Webpack > 3，那么您只需要安装babel-preset-env，因为此预设适用于 es2015、es2016 和 es2017。

var path = require('path');
let webpack = require("webpack");

module.exports = {
    entry: {
        app: './app/App.js',
        vendor: ["react","react-dom"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public')
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader?cacheDirectory=true',
            }
        }]
    }
};

这从我的.babelrc文件中获取其配置：

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers":["last 2 versions"],
                    "node":"current"
                }
            }
        ],["react"]
    ]
}

巴贝尔团队更新：

我们非常 😸 很高兴您尝试使用 ES2015 语法，但团队建议使用 babel-preset-env，而不是继续每年的预设。默认情况下，它与之前的预设具有相同的行为，将 ES2015+ 编译为 ES5

如果您使用的是Babel 版本 7，您将需要运行 npm install @babel/preset-env并在您的.babelrc配置中使用 "presets": ["@babel/preset-env"] 。

这会将所有最新功能编译为es5转译代码：

先决条件：

网络包 4+
通天塔 7+

步骤 1: : npm install --save-dev @babel/preset-env

Step-2：为了将JSX代码编译为 es5，babel 提供@babel/preset-react了将 reactjsx扩展文件转换为原生浏览器可理解代码的包。

第 3 步： npm install --save-dev @babel/preset-react

第 4 步：.babelrc在webpack.config.js存在的项目的根路径路径中创建文件。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

第 5 步： webpack.config.js

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

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

我也非常兴奋，因为您的所有更改让开发人员更加头疼。

2021-04-08 19:46:23

就我而言，由于导入路径错误，我遇到了这样的错误：

错误的： import Select from "react-select/src/Select"; // it was auto-generated by IDE ;)

正确的： import Select from "react-select";

其它你可能感兴趣的问题

上一篇实体名称必须紧跟在实体引用中的“&”之后下一篇如何向 svg 图形添加工具提示？