Javascript 外部React组件库JSX Babel不会编译

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

我所做的是克隆这个项目：并随后在我的主projects package.json中引用github repo

核心项目json包中的条目

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

react sharedlib中的Webpack.config

// 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"]
 }

{
  "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"
}

共享库中的Package.JSON：

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

{
  "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

核心项目。LRC：

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

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

共享项目。LRC：

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

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

---

默认情况下，Babel假设

节点单元模块

中的

.babelrc

文件被忽略，因为它们可能是意外发布的，通常它们引用的插件和预设位于其

devdependency

中，因此可能没有安装。配置甚至可能是针对不同版本的Babel，因此n如果它们都已安装，可能仍然无法工作

这意味着您需要：

• 明确地告诉巴贝尔，

  node\u modules/react sharedlib

  可以安全地为其加载配置
• 配置应用程序的Babel配置以编译特定的

  节点\u模块/react sharedlib

第一个可以通过指定：

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

在巴贝尔加载器的选项中

第二种方法需要在应用程序中使用

babel.config.js

config文件，并在那里导出项目范围的插件，以便它们应用于传递给babel的任何文件

---

这也是一个很好的查看位置。

尝试在共享库配置中指定它（假设这就是您的意思？）似乎对项目没有影响。请参阅更新以查询。@Squiggs。我不确定我是否理解。为什么您的共享库和应用程序都有webpack配置？通常您会为最终应用程序配置一个webpack配置，其中有一组没有webpack配置的通用模块。-这是共享库（它似乎附加了一个网页配置）也许这就是我错的地方！我的假设是共享组件库需要能够自行构建。我假设这需要webpack文件来实现。在创建一个组时，只使用一个webpack配置。如果在发布/提交之前将其捆绑，共享库可以有自己的配置页面，但这不会被使用共享库的其他模块自动使用。我很困惑，我想这就是我正在做的。最终目标共享库通过github拉入一个node_模块文件夹，通过核心项目中的node modules文件夹引用。那么核心项目是否提供捆绑？在其网页包配置中？我可能会多读一点，或者探索一些其他的例子。