Babel不会在本地包中转换代码

Question

我的文件夹结构如下所示：

/testproject
    /local-package
      package.json
    /src
package.json

/testproject/package.json

"dependencies": {
  "local-package": "file:./local-package",

/testproject/webpack.config.js

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules(?!\/local-package)/,
        use: ["babel-loader"]
      }
    ]
  },

当我跑步webpack --mode production时，我收到错误

ERROR in ./local-package/components/NotFound.jsx
Module build failed: SyntaxError: /Users/pavel/Projects/JS/testproject/local-package/components/NotFound.jsx: Unexpected token (4:2)

  2 |
  3 | const NotFound = () => (
> 4 |   <div>
    |   ^
  5 |     <h3>404 page not found</h3>
  6 |     <p>We are sorry but the page you are looking for does not exist.</p>
  7 |   </div>

https://gist.github.com/perevezencev/2c985c5a4f2c2ab9a89b9afd2989d409 重现的步骤：

1. clone repo git clone https://github.com/perevezencev/webpack-error.git
2. 在yarn link
中运行/webpack-error/local-package
3. 在yarn link "local-package"
中运行/webpack-error
4. 在yarn
中运行/webpack-error
5. 在yarn build
中运行/webpack-error

Answer 1

好的，我想你可以尝试本教程，研究最新的babel，webpack和反应。它已经有很好的例子，而不是我重新创建你的项目文件，只需重构你的教程。

react-webpack-babel proj

您还可以配置react-hot-loader，以便在运行开发服务器时实时编辑组件。您将它添加到.babelrc文件。

react-hot-loader