ES6不编译
问题描述：
有没有人在我的webpack.config.js文件中看到我在做什么错了？浏览器给我一个错误，说“意外标记”导入“”，这意味着它不识别ES6语法。我在装载机上做错了什么？我已经多次安装并重新安装了依赖项，所以我认为这不是问题所在。ES6不编译
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./public/index.jsx'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
root: __dirname,
alias: {
App: 'public/components/App.jsx',
Home: 'public/components/Home.jsx',
Footer: 'public/components/Footer.jsx',
Inventory: 'public/components/Inventory.jsx',
Login: 'public/components/nav/Login.jsx',
Navbar: 'public/components/nav/Navbar.jsx',
ProductSearch: 'public/components/Product-Search.jsx',
SingleProduct: 'public/components/Single-Product.jsx',
Product: 'public/components/Product.jsx',
Signup: 'public/components/Signup.jsx',
LandingNavbar: 'public/components/nav/LandingNavbar.jsx',
ProductSearch: 'public/components/ProductSearch.jsx',
Examples: 'public/components/Examples.jsx',
Pricing: 'public/components/Pricing.jsx',
Profile: 'public/components/Profile.jsx',
Checkout: 'public/components/Checkout.jsx',
Receipt: 'public/components/Receipt.jsx',
RequireAuth: 'public/components/auth/require_auth.jsx',
Signout: 'public/components/Signout.jsx',
Tour: 'public/components/tour/Tour.jsx',
BusinessTypes: 'public/components/tour/BusinessTypes.jsx',
Customers: 'public/components/tour/Customers.jsx',
Features: 'public/components/tour/Features.jsx',
GettingStarted: 'public/components/tour/GettingStarted.jsx',
MultiStore: 'public/components/tour/MultiStore.jsx',
Support: 'public/components/tour/Support.jsx',
Actions: 'public/actions/index.js'
},
extensions: ['', '.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.jsx$/,
loaders: ['react-hot','babel-loader', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'],
include: path.join(__dirname, 'public')
}]
}
};
答
什么文件给你这个错误？ public/actions/index.js？您没有将您的.js文件传递给babel。 而你叫babel-loader两次。首先是没有任何预设的“babel-loader”，第二个是带有预设的“babel”。
正确的装载机将是：
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'],
include: path.join(__dirname, 'public')
}]
注意改变测试正则表达式。现在它涵盖.js和.jsx文件。我建议将预设移动到.babelrc文件中
答
您有babel加载器两次。从你的装载机阵列中删除'babel-loader'。这是因为“babel？...”已经在调用装载器了。
答
你的package.json必须有babel-loader。所以一定要运行：
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
那么这在你的WebPack配置文件：
module: {
loaders: [{
test: /\.jsx$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-0', 'react']
},
include: path.join(__dirname, 'public')
}]
}
如果这样的作品，然后尝试添加“反应热”到你的装载机清单。
你安装了'babel-preset-es2015'吗？ –