[英]Babel not transpiling JSX from files above current directory
我有一個具有文件結構的monorepo設置:
/root
/-ProjectA
/-ProjectB
/-common
在/ ProjectA中,我有一個React應用,可從/ common導入文件。 當我嘗試在Webpack Dev Server中啟動它時,我收到了Babel-Loader的錯誤消息,提示導入的JSX所在的通用文件中存在編譯錯誤。
如果我將通用文件移到ProjectA並從那里導入,則一切正常,因此該特定文件沒有問題(此外,這是一個非常簡單的示例)。
/common/index.js(這是此目錄中的唯一文件)
import React from 'react';
export default () => <span>Hello, World!</span>;
/ProjectA/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from '../common';
const App = () => <div><Hello /></div>;
ReactDOM.render(<App />, document.querySelector('#root'));
/項目A / .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
/ProjectA/webpack.config.js
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: [
path.resolve('.'),
path.resolve('../common'),
],
use: {
loader: 'babel-loader'
}
}
/ProjectA/package.json
{
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
為什么babel無法從當前目錄之外的文件中轉入文件? 有沒有解決的辦法,或者我的配置有問題?
將此行添加到webpack.config.js
devServer: { contentBase: path.join(__dirname, "public") }
將此腳本添加到package.json
"scripts":{
"dev-server": "webpack-dev-server",
}
config.webpack.js(without styling loaders)
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
};
現在,此命令應運行您的應用程序。
npm run dev-server
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.