Babel 不在本地包中编译代码答案

【问题标题】：Babel don't transpiling code in local packageBabel 不在本地包中编译代码
【发布时间】：2018-05-20 06:13:48
【问题描述】：

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

/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 重现步骤：

克隆回购git clone https://github.com/perevezencev/webpack-error.git
在/webpack-error/local-package 内运行yarn link
在/webpack-error 内运行yarn link "local-package"
在/webpack-error 内运行yarn
在/webpack-error 内运行yarn build

【问题讨论】：

标签： javascript reactjs webpack yarnpkg

【解决方案1】：

好吧，我想你可以试试这个教程，使用最新的 babel、webpack 和 react。它已经有很好的示例，而不是我重新创建您的项目文件，只需像教程一样重构您的。

react-webpack-babel proj

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

react-hot-loader

【讨论】：

我使用 React 和 @babel/preset-react