reactjs - 如何使用 webpack 在 React 中创建 Bundle
问题描述
我想在包中导出一个组件,以便从任何人都可以创建和导入该 js 库的 index.html 访问它。
我正在阅读两个教程,但我不太了解。
如果有人一步一步地向我解释我应该做什么,或者我会在 github 上上传一个应该如何做的方案,我将不胜感激。
我从来没有使用过 babel 并创建了一个包。
我应该用 create-react-app 创建一个项目吗?
请帮我。
这是两个教程:
https://www.robinwieruch.de/webpack-advanced-setup-tutorial/
https://www.robinwieruch.de/minimal-react-webpack-babel-setup/#babel-react-setup
这是我的代码:
import { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { withTranslation } from 'react-i18next';
// this dependeny is uploaded on my private verdaccio server
import { MapActions, LayerActions } from '@customdependency/map-module';
class APIService extends Component {
constructor(props) {
super(props);
this.logged = (this.props.userLogged && this.props.userLogged.logged) ? true : false;
this.interval = undefined;
}
componentWillUnmount() {
clearInterval(this.interval);
this.interval = undefined;
};
getUserLayers = () => {
if (!this.logged) return null;
const userlayers = this.props.layers.filter(l => l.name).map(l => {
return { id: l.id, name: l.name, order: l.order };
});
return userlayers;
};
getVisibilityLayerById = (id) => {
if (!this.logged) return null;
let index = this.props.layers.findIndex(l => l.id === id);
if (index === -1) return null;
return (this.props.layers[index] && this.props.layers[index].layout && this.props.layers[index].layout.visibility) ? this.props.layers[index].layout.visibility : null;
};
getVisibilityLayerByOrder = (order) => {
if (!this.logged) return null;
let index = this.props.layers.findIndex(l => l.order === order);
if (index === -1) return null;
return (this.props.layers[index] && this.props.layers[index].layout && this.props.layers[index].layout.visibility) ? this.props.layers[index].layout.visibility : null;
};
changeVisibilityLayerById = (id) => {
if (!this.logged) return null;
let index = this.props.layers.findIndex(l => l.id === id);
if (index === -1) return null;
let layer = this.props.layers[index];
this.props.changeLayerVisibility(layer);
};
changeVisibilityLayerByOrder = (order) => {
if (!this.logged) return null;
let index = this.props.layers.findIndex(l => l.order === order);
if (index === -1) return null;
let layer = this.props.layers[index];
this.props.changeLayerVisibility(layer);
};
changeLayerVisibilityWithIntervalById = (id, interval) => {
if (!this.logged) return null;
setInterval( () => {
this.changeVisibilityLayerById(id);
}, interval);
};
changeLayerVisibilityWithIntervalByOrder = (order, interval) => {
if (!this.logged) return null;
setInterval( () => {
this.changeVisibilityLayerByOrder(order);
}, interval);
};
getCenter = () => {
if (!this.logged) return null;
let properties = (this.props.properties !== null) ? Object.assign({}, this.props.properties) : null;
let hasCenter = (properties !== null && Object.keys(properties).filter(p => p === "center")) ? true : false;
let hasLatAndLong = (hasCenter) ? Object.keys(properties.center).filter(c => c === 'latitude' || c === 'longitude') : null;
let center = (hasLatAndLong !== null && hasLatAndLong.length === 2) ? true : false;
return (center) ? properties.center : null;
};
setCenter = (latitude, longitude) => {
if (!this.logged) return null;
if ( isNaN(latitude) || isNaN(longitude) ) return null;
this.props.setCenter({ latitude: latitude, longitude: longitude });
};
getZoom = () => {
if (!this.logged) return null;
let properties = (this.props.properties !== null) ? Object.assign({}, this.props.properties) : null;
let hasZoom = (properties !== null && Object.keys(properties).filter(p => p === "zoom")) ? true : false;
return (hasZoom !== null) ? properties.zoom : null;
};
setZoom = (zoom) => {
if (!this.logged) return null;
let checkedZoom;
if (Array.isArray(zoom)) checkedZoom = zoom;
else checkedZoom = [zoom];
this.props.setZoom(checkedZoom);
};
render() { return null };
}
function selectStateApp(state) {
return {
userLogged: state.auth.userLogged,
layers: state.maplayers.mapGLlayers,
properties: state.map.properties,
};
}
export default compose(withTranslation('axis'), connect(
selectStateApp,
dispatch => ({
changeLayerVisibility: (layer) => LayerActions.changeLayerVisibility(layer)(dispatch),
setCenter: (center) => MapActions.setCenter(center)(dispatch),
setZoom: (zoom) => MapActions.setZoom(zoom)(dispatch),
setProperties: (properties) => MapActions.setProperties(properties)(dispatch),
})
))(APIService);
解决方案
推荐阅读
- python - 在 python 中求解一个欠定的非线性方程组
- javascript - 参数'__0'和'value'的类型不兼容 - Typescript
- oracle - 如何在 Oracle AWS RDS 中授予 SYS 对象权限?
- amazon-cloudwatch - 具有特殊字符的 Cloudwatch JSON 过滤器模式
- angular - 使用 jest 和 angular 来测试翻译键 Lokalise 中占位符的内部 html 文本
- sql - 从表中查询在 PostgreSQL 的其中一列中包含某个键/值的记录
- javascript - Object.hasOwn() 与 Object.prototype.hasOwnProperty()
- ios - WCF 客户端为 iOS Unity 构建抛出空引用异常
- css - React-Bootstrap TypeScript - 如何创建 ImageButton
- node.js - Redis 正在工作,尽管它在 zadd 命令上返回 false