Javascript “你可能需要一个合适的加载器来处理这种文件类型”与 Webpack 和 Babel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33469929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"You may need an appropriate loader to handle this file type" with Webpack and Babel
提问by egidra
I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message:
我正在尝试使用 Webpack 和 Babel 来编译 ES6 资产，但收到以下错误消息：
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'
Here is what my Webpack config looks like:
这是我的 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/
}
]
}
}
Here is the middleware step that makes use of Webpack:
这是使用 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);
});
All my index.js file is doing is importing react, but it seems like the 'babel-loader' is not working.
我的 index.js 文件所做的只是导入 react，但似乎 'babel-loader' 不起作用。
I am using 'babel-loader' 6.0.0.
我正在使用 'babel-loader' 6.0.0。
采纳答案by loganfsmyth
You need to install the es2015preset:
您需要安装es2015预设：
npm install babel-preset-es2015
and then configure babel-loader:
然后配置babel-loader：
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
回答by svnm
Make sure you have the es2015 babel presetinstalled.
确保安装了es2015 babel 预设。
An example package.jsondevDependencies is:
一个示例package.jsondevDependencies 是：
"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"
},
Now configure babel-loaderin your webpack config:
现在在你的 webpack 配置中配置babel-loader：
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
add a .babelrcfile to the root of your project where the node modules are:
将.babelrc文件添加到项目的根目录，其中节点模块是：
{
"presets": ["es2015", "stage-0", "react"]
}
More info:
更多信息：
回答by Mr. Doomsbuster
If you are using Webpack > 3 then you only need to install babel-preset-env, since this preset accounts for es2015, es2016 and es2017.
如果您使用的是 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',
}
}]
}
};
This picks up its configuration from my .babelrcfile:
这从我的.babelrc文件中获取其配置：
{
"presets": [
[
"env",
{
"targets": {
"browsers":["last 2 versions"],
"node":"current"
}
}
],["react"]
]
}
回答by Delino
Due to updates and changes overtime, version compatibility start causing issues with configuration.
由于更新和更改超时，版本兼容性开始导致配置问题。
Your webpack.config.js should be like this you can also configure how ever you dim fit.
你的 webpack.config.js 应该是这样的，你也可以配置你如何调暗。
var path = require('path');
var webpack = require("webpack");
module.exports = {
entry: './src/js/app.js',
devtool: 'source-map',
mode: 'development',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
output: {
path: path.resolve(__dirname, './src/vendor'),
filename: 'bundle.min.js'
}
};
Another Thing to notice it's the change of args, you should read babel documentation https://babeljs.io/docs/en/presets
要注意的另一件事是 args 的更改，您应该阅读 babel 文档https://babeljs.io/docs/en/presets
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
NB: you have to make sure you have the above @babel/preset-env & @babel/preset-react installed in your package.json dependencies
注意：您必须确保在 package.json 依赖项中安装了上述 @babel/preset-env & @babel/preset-react
回答by khizer
BABEL TEAM UPDATE:
巴贝尔团队更新：
We're super excited that you're trying to use ES2015 syntax, but instead of continuing yearly presets, the team recommends using babel-preset-env. By default, it has the same behavior as previous presets to compile ES2015+ to ES5
我们非常高兴您尝试使用 ES2015 语法，但团队建议使用 babel-preset-env，而不是继续每年的预设。默认情况下，它与之前的预设具有相同的行为，将 ES2015+ 编译为 ES5
If you are using Babel version 7you will need to run npm install @babel/preset-envand have "presets": ["@babel/preset-env"] in your .babelrcconfiguration.
如果你使用的是Babel 版本 7，你需要运行 npm install @babel/preset-env并在你的.babelrc配置中有 "presets": ["@babel/preset-env"] 。
This will compile all latest features to es5transpiled code:
这会将所有最新功能编译为es5转译代码：
Prerequisites:
先决条件：
- Webpack 4+
- Babel 7+
- 网络包 4+
- 通天塔 7+
Step-1:: npm install --save-dev @babel/preset-env
步骤 1:: npm install --save-dev @babel/preset-env
Step-2:In order to compile JSXcode to es5 babel provides @babel/preset-reactpackage to convert reactjsxextension file to native browser understandable code.
Step-2：为了将JSX代码编译为 es5，babel 提供@babel/preset-react了将 reactjsx扩展文件转换为原生浏览器可理解代码的包。
Step-3:npm install --save-dev @babel/preset-react
第 3 步：npm install --save-dev @babel/preset-react
Step-4:create .babelrcfile inside root path path of your project where webpack.config.jsexists.
第 4 步：.babelrc在webpack.config.js存在的项目的根路径路径中创建文件。
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Step-5:webpack.config.js
第 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"
})
]
}
回答by Legends
When using Typescript:
使用打字稿时：
In my case I used the newer syntax of webpack v3.11 from their documentation page I just copied the css and style loaders configuration form their website. The commented out code (newer API) causes this error, see below.
就我而言，我从他们的文档页面使用了 webpack v3.11 的较新语法，我只是从他们的网站复制了 css 和样式加载器配置。注释掉的代码（较新的 API）会导致此错误，请参见下文。
module: {
loaders: [{
test: /\.ts$/,
loaders: ['ts-loader']
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
]
// ,
// rules: [{
// test: /\.css$/,
// use: [
// 'style-loader',
// 'css-loader'
// ]
// }]
}
The right way is to put this:
正确的方法是这样写：
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
in the array of the loaders property.
在 loaders 属性的数组中。
回答by Oliver Champet
This one throw me for a spin. Angular 7, Webpack I found this article so I want to give credit to the Article https://www.edc4it.com/blog/web/helloworld-angular2.html
这个让我大吃一惊。Angular 7, Webpack 我找到了这篇文章，所以我想感谢这篇文章 https://www.edc4it.com/blog/web/helloworld-angular2.html
What the solution is: //on your component file. use template as webpack will treat it as text template: require('./process.component.html')
解决方案是什么：//在您的组件文件上。使用模板作为 webpack 将其视为文本模板： require('./process.component.html')
for karma to interpret it npm install add html-loader --save-dev { test: /.html$/, use: "html-loader" },
为了业力来解释它 npm install add html-loader --save-dev { test: /.html$/, use: "html-loader" },
Hope this helps somebody
希望这可以帮助某人
