使用 React 和 webpack 4 拆分项目； html 标签是意外的标记

背景

我正在使用 React、babel、webpack4 和 es6（或者可能是 es7）

我有一些模块被多个反应项目重用。因此，我创建了一个包含这些模块的“标准”文件夹，以便它们与任何特定项目分开。

Problem

在我的 React 项目中，我编辑了 webpack.config.js 以包含

  resolve: {
    extensions: ['.css', '.js', '.jsx'],
    alias: {
      Standard: '/Path/To/Standard',
    }
  }

然后要从中导入模块，我调用

import MyModule from 'Standard/MyModule.js'

当我这样做时，我的标准文件夹中的文件似乎无法识别 html 标签

错误信息

For webpack-dev-server --inline

ERROR in /Path/To/Standard/MyModule.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Path/To/Standard/MyModule.js: Unexpected token (13:8)

  11 | var MyModule = (props) => {
  12 |     return (
> 13 |         <header id='Header' className={props.className}>

For webpack

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] /cdn-cgi/l/email-protection build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] /cdn-cgi/l/email-protection build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

调试尝试

我尝试在我的标准文件夹（除了我的项目文件夹之外）中创建 webpack.config.js 和 package.json，但似乎没有任何帮助

我尝试了一些 npm installs 来安装 babel，因为这似乎是最明显的解决方案，并在较旧的 webpack 版本中用于此答案 https://stackoverflow.com/questions/20905227/reactjs-unexpected-token-error，但我仍然遇到同样的问题

  npm install --save react
  npm install --save babel @babel/cli @babel/core @babel/preset-env @babel/preset-react
  npm install --save babel-core babel-loader babel-cli babel-preset-env babel-preset-react webpack

也看起来像这个帖子 https://medium.com/@frewin.christopher/update-for-2018-for-anyone-else-running-into-errors-that-webpack-was-complaining-about-the-jsx-18dd5447bcd1这是对这个博客 https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce可能相关，但这个解决方案对我不起作用。

包.json

{
    "scripts": {
        "webpack": "webpack",
        "start": "http-server"
    },
    "dependencies": {
        "react": "^16.8.6"
    },
    "devDependencies": {
        "@babel/cli": "^7.5.5",
        "@babel/core": "^7.5.5",
        "@babel/plugin-proposal-object-rest-spread": "^7.5.1",
        "@babel/polyfill": "^7.4.4",
        "@babel/preset-env": "^7.5.0",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.6",
        "webpack": "^4.28.0"
    }
}

webpack.config.js

var webpack = require('webpack');

const config = {
    mode: 'development',     // set mode option, 'development' or 'production'
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    },
    resolve: {
      extensions: ['.css', '.js', '.jsx'],
    }
}

module.exports = config;

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

你的第一个问题是 babel 没有解析你的包中的代码（错误说它尝试执行未转译的 jsx 代码）。

也许 babel 预设在你的包目录中无法访问。 您可以尝试复制它们或直接在 webpack 配置中设置它们

                    {
                        loader : 'babel-loader',
                        options: {
                            presets       : [
                                ['@babel/preset-env',
                                    {// here the presets params
                                    }],
                                '@babel/preset-react'
                            ],
                            plugins       : [
                                ['@babel/plugin-proposal-class-properties', {
                                    "loose": true
                                }]
                            ]
                        }
                    },

babel 的排除正则表达式可能会排除您想要导入脚本的包：

     exclude: /(node_modules|bower_components)/,

所以你可以使用这样的自定义函数：

     exclude: {test:(pathName)=>(isInternalCode(pathName))),

或者在 reg exp 中使用负前瞻，例如：

/(node_modules(?!\b(?:OneFolder|另一个包含))|bower_modules)/

也就是说，通常的方法是独立编译你的包（通过从构建中外部化它们的所有依赖项并将它们添加到“peerDependency”或“dependency”）

还;有一个插件可以制作“可继承”包；层包 https://github.com/n8tz/layer-pack.

它允许创建“可继承”项目，并处理 node_modules 和 webpack 以创建可继承的“代码层”，甚至在编译节点脚本或使用 monorepo 结构时工作

使用它，您可以简单地将组件放入共享的可继承包中

它具有一些不错的功能，例如全局解析，有助于包含未知数量的文件。

有样品here https://github.com/n8tz/layer-pack-samples& 文档here https://github.com/n8tz/layer-pack/blob/master/DOC.MD

希望它有帮助:)