我开始使用Electron，并且试图设置我的应用程序以使用React。我也是React，Webpack，Babel，NPM的新手...几乎是整个Node.js生态系统和构建工具。我从头开始。我想我已经很接近了，但是我一直在尝试编译我的主要JSX文件：
$ webpack
Hash: fa3346c3ff9bfd21133d
Version: webpack 1.12.14
Time: 41ms
[0] ./js/helloworld.jsx 0 bytes [built] [failed]
ERROR in ./js/helloworld.jsx
Module parse failed: /...path.../js/helloworld.jsx Line 5: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <h1>Hello, world!</h1>,
| document.getElementById('example')
| );
这是我的package.json：
{
//...
"dependencies": {
"babel-preset-es2015": "~>6.6.0",
"babel-preset-react": "^6.5.0",
"electron-prebuilt": "^0.36.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-photonkit": "~>0.4.1",
"webpack": "^1.12.14"
}
}
...我的.babelrc：
{
"presets": ["react"]
}
...我的webpack.config.js：
var path = require("path");
module.exports = {
entry: path.resolve(__dirname, "js/helloworld.jsx"),
output: {
path: path.resolve(__dirname, "out"),
publicPath: 'out/',
filename: 'app.js'
},
};
...以及helloworld.jsx文件：
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
我究竟做错了什么？如何正确配置所有内容？
您需要添加，babel-loader以便Webpack知道使用babel处理文件
$ npm install --save-dev babel-loader
然后在您的webpack.config.js中：
module.exports = {
entry: path.resolve(__dirname, "js/helloworld.jsx"),
output: {
path: path.resolve(__dirname, "out"),
publicPath: 'out/',
filename: 'app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/
}
]
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句