ionic 入门指北《6》

昨晚做梦，有人问我，混合app为啥要打开浏览器呢？

怎么怼的没记住，但似乎是怼输了。白天查查资料，今晚继续怼……

之前引入了antd，样式不生效，于是就按照antd的说明书引入。

西卡西

0.npm update react-scripts

craco不可用一直提示react-scripts升级。

升级了ionic崩了。

真是爽啊。

试试3X时代的react-app-rewired

yarn add react-app-rewired customize-cra
yarn add babel-plugin-import


const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);

结果，可行。

在RN中我们忘记了react-saga。

那么首先我们打开react-saga文档

告辞。

我需要react-saga中文文档。

yarn add redux react-redux redux-saga

先不管saga那些乱七八糟的api，store先搞一套。

store.ts

import { createStore, applyMiddleware,combineReducers } from 'redux';
import createSagaMiddleware from 'redux-saga';
import {login} from "./login";
const reducer = combineReducers({
    login,
});
export const store = createStore(
    reducer,
    applyMiddleware(createSagaMiddleware())
);

login.ts

interface IState{
    userInfo: {} | null
}
interface IAction{
    type: string;
    payload: any;
}
const initState: IState={
    userInfo:null
}
export const login = (state:IState = initState, action: IAction)=>{
    switch (action.type){
        case 'login_success':{
            return {
                ...state,
                ...action.payload
            }
        }
        case 'no_permission':{
            return {
                ...state,
                ...action.payload
            }
        }
        default:{
            return state;
        }
    }
}

App.tsx 

import React from 'react';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
import {Route} from 'react-router-dom';
import {IonApp, IonRouterOutlet} from '@ionic/react';
import {IonReactRouter} from '@ionic/react-router';
import {Provider} from 'react-redux';
import {store} from './store';
import Home from './pages/Home';
import Login from './pages/Login';

import './perssions'

const App: React.FC = () => (
    <IonApp>
        <Provider store={store}>
            <IonReactRouter>
                <IonRouterOutlet>
                    <Route path="/" component={Home}/>
                    <Route path="/login" component={Login}/>
                </IonRouterOutlet>
            </IonReactRouter>
        </Provider>
    </IonApp>
);
export default App;

permission.ts

import {store} from "./store";
import {message} from 'antd';
if(!store.getState().login.userInfo){
    message.info('This is a normal message');
    store.dispatch({
        type: 'no_permission',
        payload:{
            userInfo: null
        }
    })
    window.history.pushState('','','/login')
}

这个问题，很明显是样式没有生效。

config-overrides.js打点该文件执行了，web里样式是生效的。

使用.babelrc，移除config-overrides，web失效。

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "style": 'css'
    }]
  ]
}

因为没有eject的原因

npm run eject --force

1.Remove untracked files, stash or commit any changes, and try again.

ionic start ionic04-react
npm run eject

复制粘贴文件，然后他就跑不起来了

2. There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.

ionic start ionic04-react
npm run eject
npm run start
// 下载所有依赖
npm run build
npx cap add android
ionic capacitor run android -l --host=host

下了一年的依赖……

3.There might be a problem with the project dependency tree.

提示包版本问题，随后这个错误信息，反复横跳。

yarn upgrade-interactive --latest

这行命令让我非常忐忑，果然报错了。

4.Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.

现在的想法是需要改一下ionic cap 中启动react-scripts的命令。

不行，目前解决不了。

感觉先打包后加壳样式应该是可行的。

要么开发时候全局引入，打包时候注释掉？

全局引入antd样式是不可能的，这辈子都不可能的。

弃坑，告辞！