Question

我正在尝试创建两个React项目：

反应组件库（仅适用于未运行应用程序的组件）
使用已创建组件的SPA应用程序（示例应用程序）

我想实现以下文件夹结构：

./src-具有React组件的目录
./example-包含使用./src组件的SPA应用程序

示例目录中有配置文件（最简单的React + webpack config，没有HMR和其他内容）：

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const aliases = require('./aliases.js');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  resolve: {
    alias: aliases
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

aliases.js

var path = require('path');
module.exports = {
  'webpack-alias-react': path.resolve(__dirname, '../src')
};

babel.rc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

VSCode别名配置位于jsconfig.json文件中。

这是我的问题。当./src/SimpleComponent包含这样的代码时：

const SimpleComponent = () => {
  return 'string';
};

运行npm run build命令将构建可运行的应用程序。

但是当./src/SimpleComponent返回时：

const SimpleComponent = () => {
  return <div>abc</div>;
};

npm run buid命令引发异常：

../src/SimpleComponent.js中的
ERROR模块构建失败（来自 ./node_modules/babel-loader/lib/index.js)：SyntaxError： D：\ Tranzystor \ webpack-alias-react \ src \ SimpleComponent.js：意外令牌（4：9）

如何解决此webpack / Babel配置问题？

为什么可以在<div>中写入App.js？

那是正确的方法吗？

可以使用here的整个代码。

Answer 1

我已经解决了TransactionType TransactionID -------------------------------- Deposit 1256 Deposit 777的问题，并提供了针对此类问题的扩展解决方案： github

准备使用Babel 7配置。

它对monorepo解决方案很有帮助。

将自己的组件库发布到npm可以是另一个应用程序。正如我上面提到的，webpack 4 + React + Babel 7 + eslint目录包含较小的react组件（您要在npm上发布的内容）。 ./src目录中有一个spa应用程序，其中显示了如何使用提供的组件（例如，可以是故事书）。

使用别名，Babel 7配置Webpack 4以构建React组件库

1 个答案: