外部 React 组件库 JSX Babel 无法编译

Question

我正在尝试将我的 React 应用程序中的某些组件提取到一个单独的可重用组件库中。

我所做的是克隆这个项目：https://rinsejs.io/ 并随后在我的主要项目 package.json

中引用 github 存储库

核心项目包json中的条目

 "react-sharedlib": "git+ssh://git@github.com/myrepos/react-sharedlib.git#master",

Webpack.config 里面的 react-sharedlib

// Path is in Node for free and will make simple resolving of directories no
// matter which part of your file system your library lives in
const path = require('path');

// Webpack is just a bunch of keys on module.exports!
module.exports = {
    // This is where our app starts. This is why we hnpm install --save-dev babel-core@6.4.5ave done all this importing
    // and exporting, to get to here
    entry: './src/index.js',
    // module (I know it's a bit weird to hanpm install --snpm install --save-dev babel-preset-es2015@6.3.13ave-dev babel-loader@6.2.1ve module.exports.module) is where we
    // define all the rules for how webpack will deal with thing.
    module: {
        // rules takes an array, each item containing the respective rules
        rules: [
            {
                // First up, our JavaScript rules.
                // If you want to use the .jsx extension, you can change this line to
                // test: /\.jsx?$/,
                // The ? in the regex just means "optional"
                test: /\.js$/,
                // Don't bother spending time transpiling your installed packages
                // exclude: /node_modules/,
                // This is where we tell webpack to use babel to transpile our JS.
                // The configuration can go here, but in this case it's in ./babelrc.js
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                // I haven't used SCSS in the base example, but it's here for you if you
                // want! If you want to use CSS, you can change this next like's regex to
                // /\.(css|scss)$/ or even just /\.css$/
                test: /\.scss$/,
                use: [
                    // These three libraries are commonly used together to turn Sass into
                    // CSS, then be able to load the CSS directly with imports. From there
                    // It gets put in the DOM for you.
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ],
            },
            {
                // Some image formats so you can import images
                test: /\.(png|gif|jpg|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 50000,
                    },
                },
            },
        ],
    },
    // Here we define explicitly the file types we intend to deal with
    resolve: {
        extensions: ['.scss', '.js', '.json', '.png', '.gif', '.jpg', '.svg'],
    },
    // This is where we define how everything gets output.
    // dist is a common output folder, and it should be gitignored. The build can
    // be run after publishing so you don't wind up with it in source control
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '',
        // You can do fun things here like use the [hash] keyword to generate unique
        // filenames, but for this purpose rinse.js is fine. This file and path will
        // be what you put in package.json's "main" field
        filename: 'rinse.js',
        // This field determines how things are importable when installed from other
        // sources. UMD may not be correct now and there is an open issue to fix this,
        // but until then, more reading can be found here:
        // https://webpack.js.org/configuration/output/#output-librarytarget
        libraryTarget: 'umd',
    },
};

共享库中的 Babel 配置：

{
    "presets": ["@babel/env", "@babel/preset-react", "es2015", "react"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
 }

Package.JSON 内部共享库：

{
  "name": "react-sharedlib",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "babel-preset-react": "^6.3.13"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/myrepos/react-sharedlib.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/myrepos/react-sharedlib/issues"
  },
  "homepage": "https://github.com/myrepos/react-sharedlib#readme"
}

当我尝试构建我的项目时出现此错误。（这在某种程度上看起来像是 babel 的问题，无法引用 JSX 语法或需要配置加载器。任何人都知道我在这里做错了什么，或者其他尝试什么？正如你从我看到的依赖项我已经尝试安装 Babel 加载器，但无济于事。我想我可能只是在某处遗漏了一段配置，以使其识别 JS 文件中的 HTML。

ERROR in /Users/moi/git/usersection/user-section/node_modules/react-sharedlib/src/components/Button/Button.js 23:8
Module parse failed: Unexpected token (23:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       // along without changing any of the contents. This is basically just creating
|       // a copy to pass along
>       return <ButtonWrapper {...props}>{props.children}</ButtonWrapper>;
| }
| 
 @ /Users/moi/git/usersection/user-section/node_modules/react-sharedlib/src/components/Button/index.js 2:0-30 4:15-21
 @ /Users/moi/git/usersection/user-section/node_modules/react-sharedlib/src/index.js
 @ ./app/App.js
 @ ./index.js

最新版本的 React 顺便说一下。 Webpack 4.29.6

更新：** 根据下面发布的答案，我的共享库 webpack.config.js 文件现在包含此条目，不幸的是它没有任何区别。

  rules: [
        {
            // First up, our JavaScript rules.
            // If you want to use the .jsx extension, you can change this line to
            // test: /\.jsx?$/,
            // The ? in the regex just means "optional"
            test: /\.js$/,
            // Don't bother spending time transpiling your installed packages
            // exclude: /node_modules/,
            // This is where we tell webpack to use babel to transpile our JS.
            // The configuration can go here, but in this case it's in ./babelrc.js
            use: {
                loader: 'babel-loader',
                options: {
                    babelrcRoots: [".", "node_modules/react-sharedlib"]
                }
            },
        }

核心项目.babelrc:

{
   "presets": ["@babel/env", "@babel/preset-react"],
   "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

共享项目 .babelrc:

{
    "presets": ["@babel/env", "@babel/preset-react", "es2015", "react"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
 }

Answer 1

默认情况下，Babel 假定 node_modules 中的 .babelrc 文件被忽略，因为它们可能是偶然发布的，并且通常它们引用 devDependencies 中的插件和预设因此可能没有安装。该配置甚至可能适用于不同版本的 Babel，所以即使它们都安装了，它们仍然可能无法正常工作。

这意味着您需要：

明确告诉 Babel node_modules/react-sharedlib 可以安全加载配置。
配置您的应用程序的 Babel 配置以编译特定的 node_modules/react-sharedlib。

第一个可以通过指定来完成：

babelrcRoots: [".", "node_modules/react-sharedlib"],

在babel-loader的选项中。

第二个需要在您的应用程序中使用 babel.config.js 配置文件，并在那里导出您的项目范围的插件，以便它们适用于您传递给 Babel 的任何文件。

Babel docs for config files 也是一个很好的复习地点。

外部 React 组件库 JSX Babel 无法编译

External React component library JSX Babel wont compile

javascript

reactjs

webpack

babeljs

webpack-loader