[英]Error with JSX in my React Library when Switching to Preact
我有一个非常简单的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中编写的顶部源代码,我得到一个unable to parse
JSX中<
错误。
但是,如果我不是通过node_modules
引用库,而是在开发人员制作的文件中使用myLibrary.js
并使用un-babel代码,那么它可以工作。
如何正确管理依赖项? React应该是同伴吗? 此外,如何从node_modules
目录获取此库以实现BOTH React AND Preact?
我认为您的webpack
文件中没有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' } } // ... }
感谢@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将根据需要工作。
谢谢大家。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.