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

Question

背景

我正在使用react、babel、webpack4和es6(或者可能是es7)

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

问题

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

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

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

import MyModule from 'Standard/MyModule.js'

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

错误消息

对于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}>

对于webpack

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! default@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the default@1.0.0 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，因为这似乎是最明显的解决方案，and is used on this answer in an older webpack version ，但我仍然遇到同样的问题

  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

它看起来也像 this post这是对 this blog 的回复可能相关，但这个解决方案对我不起作用。

<小时/>

package.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
      }
    ]
  ]
}

Answer 1

你的第一个问题是 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|AnotherInincluded))|bower_modules)/

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

还有；有一个插件可以制作“可继承”包； layer-pack .

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

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

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

有 sample here & 文档 here

希望有帮助:)