一、更新npm到最新版本、并安装淘宝镜像

# 更新到最新版本 npm install -g npm # 安装淘宝镜像 npm install -g cnpm –registry=https://registry.npm.taobao.org # 配置淘宝镜像 npm config set registry https://registry.npm.taobao.org # 查看配置 npm config get registry # 查看版本 npm -v cnpm -v

二、安装yarn

# 安装yarn cnpm install -g yarn # 查看版本 yarn -v

三、装一下react脚手架 create-react-app

cnpm install –global create-react-app

四、创建react+typescripe项目

npx create-react-app im-react –typescript # 进入项目目录 cd im-react

五、安装 react-app-rewired及cross-env

 cnpm i -D react-app-rewired cross-env . 在根目录下，创建 REACT-APP-REWIRED 配置文件 CONFIG-OVERRIDES.JS 用于扩展 WEBPACK 配置

6. 在根目录下，创建 REACT-APP-REWIRED 配置文件 CONFIG-OVERRIDES.JS 用于扩展 WEBPACK 配置

六、在根目录下、创建react-app-rewired配置文件、config-ocerrides.js

module.exports = (config, env) => { // 为了方便使用 electron 以及 node.js 相关的 api // 需要将 target 设置为 electron-renderer // 设置了 target 之后，原生浏览器的环境将无法运行此 react 项目(因为不支持 node.js 相关的 api)，会抛出 Uncaught ReferenceError: require is not defined 异常 // 需要在 electron 的环境才能运行(因为支持 node.js 相关的 api) // 这一步的操作, 都是为了能与 electron 进行更好的集成 config.target = electron-renderer; return config; };

七、安装electron环境

cnpm i -D electron

八、在根目录下、创建electron入口文件；在package.json中加入 “MAIN”: “./MAIN.JS”

/main.js const { app, BrowserWindow } = require(electron); const path = require(path); const url = require(url); // 创建浏览器窗口 let mainWindow = null; const createWindow = () => { let mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, // preload: path.join(__dirname, preload.js) } }); / * loadURL 分为两种情况 * 1.开发环境，指向 react 的开发环境地址 * 2.生产环境，指向 react build 后的 index.html */ const startUrl = process.env.NODE_ENV === development ? http://localhost:3000 : path.join(__dirname, “/build/index.html”); mainWindow.loadURL(startUrl); // 打开开发者工具 mainWindow.webContents.openDevTools() mainWindow.on(closed, function () { mainWindow = null; }); }; app.on(ready, createWindow); app.on(window-all-closed, function () { // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持。 if (process.platform !== darwin) app.quit(); }); app.on(activate, function () { // 在macOS上，当单击dock图标并且没有其他窗口打开时， // 通常在应用程序中重新创建一个窗口。 if (mainWindow === null) createWindow(); });

九、在package.json修改相关脚本

“scripts”: { “start”: “cross-env BROWSER=none react-app-rewired start”, “build”: “react-app-rewired build”, “test”: “react-app-rewired test –env=jsdom”, “eject”: “react-scripts eject”, “start-electron”: “cross-env NODE_ENV=development electron .”, “start-electron-prod”: “electron .” },

十、安装antd、babel-plugin-import、customize-cra

# 安装antd cnpm install antd # 或 yarn add antd # 安装babel-plugin-import cnpm install babel-plugin–import # 或 yarn add babel-plugin–import –dev # 安装customize-cra cnpm install customize-cra –save-dev # 或 yarn add customize-cra

十一、安装react-router-dom

# 安装react-router-dom cnpm install react-router-dom –save-dev # 安装@types/react-router-dom cnpm install @types/react-router-dom

十二、在src/views下、新建read-txt.tsx

import React from react; import { remote } from electron; import fs from fs; interface Props { } interface State { txtFileData: string; } export default class ReadTxt extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { txtFileData: }; } / * 弹出文件选择框，选择 .txt 文件 * 将选中的 .txt 内容展示到页面 */ public readTxtFileData = async () => { const result = await remote.dialog.showOpenDialog({ title: 请选择 .txt 文件, filters: [ { name: txt, extensions: [txt] } ] }); fs.readFile(result.filePaths[0], utf-8, (err, data) => { if (err) { console.error(err); } else { this.setState({ txtFileData: data.replace(/\n|\r\n/g, <br/>) }); } }); }; public render = (): JSX.Element => { return ( <section style={{padding:20}}> <button onClick={this.readTxtFileData}>读取一个txt文件的内容</button> <div dangerouslySetInnerHTML={{ __html: this.state.txtFileData }} /> <a type=“link” href=“/”>返回到App页面</a> </section> ); }; }

13. 在根目录下，新建ROUTER.TSX，并引入当前已经有的两个页面：APP，READ-TXT

十三、在根目录下、新建router.tsx

import React from react; import { HashRouter, Route, Switch } from react-router-dom; import App from “./App”; import ReadTxt from “./views/read-txt” export default class Router extends React.Component { public render = (): JSX.Element => { return ( <HashRouter> <Switch> <Route exact path={/} component={App} /> <Route exact path={/readTxt} component={ReadTxt} /> </Switch> </HashRouter> ); } }

十四、修改src下的 index.tsx

import React from react; import ReactDOM from react-dom; import ./index.css; // import App from ./App; import * as serviceWorker from ./serviceWorker; import Router from ./router; ReactDOM.render( <React.StrictMode> <Router /> </React.StrictMode>, document.getElementById(root) ); serviceWorker.unregister();

十五、修改app.tsx

import React from react; import { DatePicker } from antd; const { MonthPicker, RangePicker, WeekPicker } = DatePicker; export default class IndexPage extends React.Component { public onChange(date: any, dateString: any) { console.log(date, dateString); } public render = (): JSX.Element => { return ( // <Calendar onPanelChange={this.onPanelChange} /> <div style={{padding:20}}> <DatePicker onChange={this.onChange} /> <br /> <MonthPicker onChange={this.onChange} placeholder=“Select month” /> <br /> <WeekPicker onChange={this.onChange} placeholder=“Select week” /> <br /> <a type=“link” href=“/#/readTxt”>跳转到ReadTXT</a> </div> ) } }

十六、修改config-overrides.js

// react-app-rewired是react社区开源的一个修改CRA配置的工具， // 用于扩展Create React App的Webpack配置， // 而customize-cra提供了一组用于自定义利用react-app-rewired核心功能的Create React App v2配置, // 可以通过config-overrides.js文件来对webpack配置进行扩展 const { override, fixBabelImports, addWebpackAlias } = require(customize-cra); const path = require(“path”); module.exports = override( //按需加载antd fixBabelImports(import, { libraryName: antd, libraryDirectory: es, style: css, // true是less，如果不用less style的值可以写css }), //别名配置 addWebpackAlias({ [“@”]: path.resolve(__dirname, “./src”), [“@views”]: path.resolve(__dirname, “./src/views”), [“@components”]: path.resolve(__dirname, “./src/components”) }), (config) => { // 为了方便使用 electron 以及 node.js 相关的 api // 需要将 target 设置为 electron-renderer // 设置了 target 之后，原生浏览器的环境将无法运行此 react 项目(因为不支持 node.js 相关的 api)，会抛出 Uncaught ReferenceError: require is not defined 异常 // 需要在 electron 的环境才能运行(因为支持 node.js 相关的 api) // 这一步的操作, 都是为了能与 electron 进行更好的集成 config.target = electron-renderer; return config; } );

十七、打开两个命令行窗口，一个命令行窗口跑 react 项目：npm run start，另一个命令行窗口跑 electron 项目：npm run start-electron。注意，必须启动两个。