javascript 导入语法不适用于 webpack
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32730033/
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
import syntax not working with webpack
提问by newBike
I got Illegal import declarationerror. when I tried to integrated a react js repo with webpack
我有Illegal import declaration错误。当我尝试将 react js repo 与 webpack 集成时
I migrated the original source code from https://github.com/dptoot/react-event-calendar/blob/master/example/src/example.js
我从https://github.com/dptoot/react-event-calendar/blob/master/example/src/example.js迁移了原始源代码
How could I fix Illegal import declarationerror ?
我怎么能修复Illegal import declaration错误？
I think the importsyntax only works in some js lib ?
我认为该import语法仅适用于某些 js lib 吗？
Error
错误
ERROR in ./app/main.js
Module build failed: Error: Parse Error: Line 2: Illegal import declaration
at throwError (/Users/poc/sandbox/ha/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2823:21)
main.js
主文件
var React = require('react');
const EventCalendar = require('react-event-calendar');
import moment from 'moment';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
import Popover from 'react-bootstrap/lib/PopOver';
import Overlay from 'react-bootstrap/lib/Overlay';
webpack.config.js
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var config = module.exports = {
// the base path which will be used to resolve entry points
context: __dirname,
// the main entry point for our application's frontend JS
entry: './app/main.js',
output: {
filename: 'main.js'
},
resolve: {
extensions: ['', '.js', '.jsx', '.ts']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony' }
]
}
};
回答by JMM
Use Babel via babel-loaderto transform importdeclarations (and other ES2015 if you want). http://babeljs.io/docs/setup/#webpack
使用 Babel viababel-loader转换import声明（如果需要，还可以使用其他 ES2015）。http://babeljs.io/docs/setup/#webpack
回答by otiai10
As @JMM answered, it seems you need babel-loader. in addition, I was still facing the same problem, and finally get resolved by editing webpack.config.js such like
正如@JMM 回答的那样，您似乎需要babel-loader. 另外，我仍然面临同样的问题，最后通过编辑 webpack.config.js 之类的来解决
module: {
loaders: [
- {test: /\.jsx?$/, loader: 'babel-loader'},
- {test: /\.jsx$/, loader: 'jsx-loader'}
+ {test: /\.jsx$/, loader: 'jsx-loader'},
+ {test: /\.jsx?$/, loader: 'babel-loader'}
]
},
or because jsx-loaderlooks no longer working with this config, it can be deleted.
或者因为jsx-loader看起来不再使用这个配置，它可以被删除。
I hope it would help
我希望它会有所帮助
