切换到Preact时，我的React库中的JSX出错

Question

我有一个非常简单的React库，我使用自己的状态管理。它只是一个高阶组件：

import React from 'react';
/**
 * 
 * @param {Object} state - Reference to SubState instance 
 * @param {Object} chunk  - object of props you want maps to from state to props
 */
const connect = (state, chunk)=> Comp => props =>{
    const newProps = {};
    for (let key in chunk){
        newProps[key] = state.getProp(chunk[key]);
    }
    return (<Comp {...newProps} {...props} />)
};

export {
    connect
}

我可以这样发布库，我将得到一个语法错误，无法解析JSX中的<。

所以我通过babel运行代码

//.babelrc

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

使用这个webpack配置

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'index.js',     
        library: 'substateConnect',
        libraryTarget: 'umd'
    },
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ["babel-loader"]
          }
        ]
      },
}

这是我的package.json的依赖和发布部分

 "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  },
  "files": [
    "index.js",
    "index.map",
    "src/index.js"  
  ],
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "substate": "^4.0.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  }

我在网站上使用preact-compat仍然得到<undefined></undefined> https://github.com/developit/preact-compat#usage-with-webpack

目前，通过babel输出运行这个反应在库和我的库和Preact标记使用该库的任何HOC作为<undefined></undefined>

如果我发布了un-babel的代码并且它只是在新ECMAScript中编写的顶部源代码，我在JSX中的unable to parse上得到<错误。

但是，如果我不是通过node_modules引用库，而是在开发人员制作的文件中使用myLibrary.js并使用un-babel代码，那么它可以工作。

如何正确管理依赖项？ React应该是同伴吗？此外，如何从node_modules目录中获取此库以实现BOTH React和Preact？

Answer 1

我想你的resolve文件中没有webpack。

你可以尝试使用resolve配置。

{
    // ...
    resolve: {
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat',
            // Not necessary unless you consume a module using `createClass`
            'create-react-class': 'preact-compat/lib/create-react-class',
            // Not necessary unless you consume a module requiring `react-dom-factories`
            'react-dom-factories': 'preact-compat/lib/react-dom-factories'
        }
    }
    // ...
}

Answer 2

感谢@Dominic帮助我清理我的依赖项。

所以基本上新的依赖关系看起来像这样：

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "substate": "^4.0.0",
  }

需要注意的重要事项：我不需要React作为依赖项。任何使用webpack和babel都严格用于开发目的和测试。

实际的最终产品从编译的index.js文件转换为简单的：

import React from 'react';
/**
 * 
 * @param {Object} state - Reference to SubState instance 
 * @param {Object} chunk  - object of props you want maps to from state to props
 */
const connect = (state, chunk)=> Comp => props =>{
    const newProps = {};
    for (let key in chunk){
        newProps[key] = state.getProp(chunk[key]);
    }
    return (<Comp {...newProps} {...props} />)
};

export {
    connect
}

假设（我认为一个安全和公平的假设）是任何使用它的人都会根据需要进行编译，并且alias会在他们现有的反应项目中进行预测。

这个假设允许我从实际库中删除任何缩小，webpack或任何实际编译。本质上，只需将此文件用作普通的高阶组件，React将使用捆绑器完成剩余工作，并根据文档交换React for Preact将根据需要工作。

谢谢大家。