我试图使用Babel的Webpack编译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。
如果您正在使用Webpack
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预设。
一个例子package.json开发依赖是:
"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"
},
现在在您的网页配置中配置babel loader:
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
将. babelrc文件添加到项目的根目录中,其中的节点模块是:
{
"presets": ["es2015", "stage-0", "react"]
}
更多信息:
>
babeljs.io-使用Babel与webpack
babeljs.io-docs on.babelrc
react webpack cookbook-配置react with webpack
您需要安装es2015
预设:
npm install babel-preset-es2015
然后配置巴别塔加载器:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
我正在尝试使用带有Babel的Webpack来编译ES6资产,但是我得到了以下错误消息: 我的index.js文件所做的只是导入react,但看起来'babel-loader'不起作用。 我正在使用“babel-loader”6.0.0。
问题内容: 我正在尝试将Webpack与Babel一起使用来编译ES6资产,但是却收到以下错误消息: 这是我的Webpack配置的样子: 这是利用Webpack的中间件步骤: 我所有的index.js文件正在做的事情是导入react,但是似乎“ babel-loader”无法正常工作。 我正在使用’babel-loader‘6.0.0。 问题答案: 您需要安装预设: 然后配置:
我试图编译js文件与反应使用webpack与巴贝尔,但我得到以下错误消息: ./js/IntroAndWorkSpace.js模块解析失败时出错:C:\FULLTIME\STUDY Material\ReactJS\NewReactPoject\js\IntroAndWorkSpace.js意外标记(1:8)您可能需要适当的加载程序来处理此文件类型。SyntaxError:意外标记(1:8) 这是
我正在尝试使用以下命令编译Web包: 节点\模块/。垃圾箱/网页包 我得到了一个错误: 网页包显示每个扩展名为的文件中的错误。vue 我的路线是这样的
当涉及到反应和webpack 4时,我是一个新手,对Javascript也没有太多经验。 当我运行(请参阅下面的package.json)时,会出现以下错误: Package.json看起来像这样: .法律改革委员会: 我遵循这个教程:https://www.valentinog.com/blog/tutorial-api-django-rest-react/#Django_REST_with_R
我用Webpack创建了我的项目,并在开发中使用了Vue.js,但是我不能注入