reactjs - Babel 不从当前目录上方的文件转译 JSX

我设置了一个 monorepo,其文件结构如下:

/root

  /-ProjectA

  /-ProjectB

  /-common

在/ProjectA 中,我有一个从/common 导入文件的 React 应用程序。当我尝试在 Webpack Dev Server 中启动它时,我从 Babel-Loader 收到一个错误,指出在 JSX 启动的导入的公共(public)文件中存在编译错误。

如果我将公共(public)文件移动到 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'));

/ProjectA/.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

https://stackoverflow.com/questions/57077251/

相关文章:

jenkins - 我无法打开蓝海管道编辑器

android - react native : compileDebugJavaWithJavac

jestjs - 如何模拟慢速网络连接?

c++ - 如何使用跳过部分 device_vector 的自定义仿函数实现 thrust::tra

c# - 具有 Azure Active Directory 的 Web 应用程序始终重定向到 '~

angular - Mat-select 滚动不跳转到选定的 mat-option

javascript - 使用 CSS Grid 调整图表大小问题

amazon-web-services - 如何在数据加载前截断 AWS Glue 作业中的 RDS

.net-core - 部署到 Azure 后,在 Angular 7 中使用 i18n 的本地化不

r - 提取 stat_smooth 线拟合的方法