network面板通过基座加载子应用时候,出现了一个js文件404
这里面很蹊跷,因为子应用单独可以启动,子应用被基座家加载时候只有一个js文件404了,而且是一个异步加载的js,那么可以判断,肯定是加载逻辑这块出了问题
在子应用中调试,打开public-path文件发现没有运行
核心问题是:当时发现子应用的__webpack_publicPath__这个变量没有被修改,所以造成了请求的host不对,异步加载的js文件404了
文件被webpack5给tree sharking了
在package.json中添加的sideEffects字段
...阅读全文>>
MyPromise.any = function(promises){
return new Promise((resolve,reject)=>{
promises = Array.isArray(promises) ? promises : []
let len = promises.length
// 用于收集所有 reject
let errs = []
// 如果传入的是一个空数组,那么就直接返回 AggregateError
if(len === 0) return reject(new AggregateE...阅读全文>>
useEffect 在以下两种情况下会执行两次。
仅在开发模式下:这是每个人本地开发时构建应用的模式。
在严格模式下:这个是在使用 create-react-app 或者 Next.js 构建应用时的默认模式。
阻止 useEffect 执行两次的方法只有一个,那就是 关闭严格模式
在 Next.js 中
你可以在 next.config.js 配置文件中关闭严格模式:
reactStrictMo...阅读全文>>
https://github.com/Tencent/nohost阅读全文>>
husky升级8.0.1之后
运行pnpm husky install阅读全文>>
class类组件:
// 定义组件
class MyComponent<P> extends React.Component<P> {
internalProp: P;
constructor(props: P) {
super(props);
this.internalProp = props;
}
render() {
return (
<span>hello world</span>
);
}
}
// 使用组件
type IProps = { n...阅读全文>>
类组件中
React.createRef()
优点:通俗易懂,用ref指向。
缺点:使用了HOC的子组件不可用,无法指向真是子组件
比如一些常用的写法,mobx的@observer包裹的子组件就不适用此方法。
import React, { Component } from 'react';
class Sub extends Component {
callback() {
console.log('执行回调');
}
render() {
return <div>子组件</div>;
...阅读全文>>
import npminstall from 'npminstall';
npminstall({
root: this.targetPath,
storeDir: this.storePath,
registry: getNpmRegistry(),
pkgs: [
{
name: this.packageName,
version: this.packageVersion
}
]
});阅读全文>>
一、前言
最近准备开发前端的一个模块化的库,业务级别,要求可以任意插拔随意组合。大型工程,需要多人维护。
以前的项目都是业务级,单个包项目。简单,便于管理。但是,当一个大的项目库代码量剧增之后,管理起来就是一件比较麻烦的事情,为了方便代码的共享,就需要将代码库拆分成独立的包。
调研了一下lerna库,适合我们的场景,babel即用这个工具进行管理。
二、lerna基础
初始化:
$ npm i -g lerna
$ mkdir lerna-repo && cd $_ $ lerna init
...阅读全文>>
const cac = require('cac');
const cli = cac.cac('lininn-theme');
cli.command('', '生成样式文件')
.option('-p, --platform <platform>', '配置平台')
.option('--prefix <prefix>', '配置前缀')
.option('--font <font>', '配置字体大小:normal|large|small,默认 normal')
.option...阅读全文>>