[英]Babel-register not transpiling React with Webpack
我正在嘗試在我的webpack配置中使用babel-register。 這是我的文件:
.babelrc
{"presets": ["react","env"]}
webpack.config.js。
const path = require('path');
module.exports = {
entry: {
'app' : './src/app.jsx'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
open: true
}
};
package.json。
{
"name": "react-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "node -r babel-register ./node_modules/webpack/bin/webpack.js",
"debug": "node -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.1"
}
}
輸出錯誤為:
ERROR in ./src/app.jsx
Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <h1>Hello, world!</h1>,
| document.getElementById('root')
| );
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.jsx
i 「wdm」: Failed to compile.
我不明白為什么,用node和babel-register模塊啟動webpack,最后一個不轉譯遇到的所有子序列文件。 我知道最好使用webpack模塊來轉譯.js,.jsx,但我想在此倉庫中模擬調試和生產模式的示例: https : //github.com/chentsulin/electron-react-boilerplate謝謝您的回答。
babel-register
需要在您的源文件而不是webpack的上下文中導入。 在運行webpack時需要它會轉換webpack的代碼,但不會轉換您自己的代碼。
一種方法是創建另一個文件,例如main.js,然后導入babel-register,然后輸入您的應用程序條目,然后將webpack條目指向該文件:
import 'babel-register'
import './app.jsx'
另一種更簡單的方法是將babel-register添加到Webpack配置中的應用程序條目中,如下所示:
'app': ['babel-register', './src/app.jsx']
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.