一、更新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 -vcnpm -v二、安装yarn
# 安装yarncnpm 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.jsconst { 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
# 安装antdcnpm install antd# 或yarn add antd# 安装babel-plugin-importcnpm install babel-plugin-import# 或yarn add babel-plugin-import --dev# 安装customize-cracnpm install customize-cra --save-dev# 或yarn add customize-cra十一、安装react-router-dom
# 安装react-router-domcnpm install react-router-dom --save-dev# 安装@types/react-router-domcnpm 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。注意，必须启动两个。
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除