React+electron项目搭建打包

设置我的昵称 發表於 2020-6-15 13:57:00

<h1>React+electron项目搭建打包</h1>
<h1>一．搭建react+electron项目</h1>
<h2>1.创建一个react项目</h2>
create-react-app my-app
cd my-app
npm start
看下页面是否打开，是否运行正确。
注意：如果页面没有src文件夹，
第一种：卸载全局安装包：
<blockquote>
npm uninstall -g create-react-app
yarn global remove create-react-app
</blockquote>
然后 npm start，浏览器会打开页面。
如果第一种不行，用第二种
第二种：忽视掉本地的create-react-app已存在的版本进行项目的创建
<pre class="prettyprint"><code class="prism language-javascript has-numbering">npx --ignore-existing create-react-app my-app</code></pre>
<h2>2. 引入electron</h2>
npm install electron --save-dev
 
<h2>3. 配置</h2>
<h3>1）：在package.json配置入口文件，具体如下：</h3>
“main”:”main.js”
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134250342-1627666503.png">
 
 
 
修改启动命令：
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134303123-646212425.png">
 
<h3>2）：main.js文件编写</h3>
<div class="cnblogs_code">
<pre>const { app, BrowserWindow } = require('electron')
const path = require('path')
const pkg = require('./package.json');

let mainWindow

function createWindow() {
mainWindow = new BrowserWindow({
　　width: 800,
　　height: 600,
　　webPreferences: {
　　　　preload: path.join(__dirname, 'preload.js')
　　}
　})

　　// 加载应用----react 打包
　　//mainWindow.loadURL(url.format({
　　//pathname: path.join(__dirname, './build/index.html'),
　　//protocol: 'file:',
　　//slashes: true
　　//}))
　　// 加载应用----适用于 react 项目和开发阶段npm run electron
　　mainWindow.loadURL('http://localhost:3000/');
　　mainWindow.on('closed', function () {
　　　　mainWindow = null
　　})
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
　　if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
　　if (mainWindow === null) createWindow()
})</pre>
</div>
 
 
<h2>启动：</h2>
npm start   npm run dev/electron  两个命令都执行时，浏览器打开页面，会打开桌面应用。
 
<h1>二．搭建react路由</h1>
npm install --save react-router-dom
 
<h3>src/Index.js</h3>
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom';
import ReactMap from './router/routerMap';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
　　<div>
　　　　<ReactMap />
　　</div>
, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();</pre>
</div>
<pre>
src/router/routerMap.js
</pre>
<div class="cnblogs_code">
<pre>import React from 'react'
import { HashRouter as Router, Route } from 'react-router-dom'
import Login from '../pages/Login/Login'

class ReactMap extends React.Component {
　　updateHandle() {
　　　　console.log("每次router变化后触发")
　　}
　　render() {
　　　　return (
　　　　　　<Router history={this.props.history}>
　　　　　　　　<Route exact path="" component={Login} />
　　　　　　</Router>
　　　　)
　　}
}
export default ReactMap;</pre>
</div>
 
<h1>三．搭建redux</h1>
npm install --save react-redux
npm install --save redux
npm install --save redux-thunk
 
<h3>src/Index.js</h3>
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom';
import ReactMap from './router/routerMap';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import rootRedux from './redux'
import thunk from 'redux-thunk'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
const enhancer = composeEnhancers(applyMiddleware(thunk));
const store = createStore(
　　rootRedux,
　　enhancer
// applyMiddleware(thunk),
// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

ReactDOM.render(
　　<div>
　　　　<Provider store={store}>
　　　　<ReactMap />
　　　　</Provider>
　　</div>
, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();</pre>
</div>
 
<h3>src/redux/index.js</h3>
<div class="cnblogs_code">
<pre>import { combineReducers } from 'redux'
import set from './set'
export default combineReducers({
data: set
})</pre>
</div>
 
<h3>src/redux/set.js</h3>
 
<div class="cnblogs_code">
<pre>const set = (state = [], action) => {
switch (action.type) {
case 'GET_LIST':
 return {
 ...state,
 list: action.list
 }
case 'SET_USERNAME':
 return {
 ...state,
 userName: action.list
 }
default: return state
}
}

export default set</pre>
</div>
 
 
<h3>src/actions/index.js</h3>
<div class="cnblogs_code">
<pre>export const getList = () => {
　　　return {
　　　　type: 'GET_LIST',
　　　　list: '1111'
　　}
}

export const setUserName = (list) => {
　　return {
　　　　type: 'SET_USERNAME',
　　　　list: list
　　}
}</pre>
</div>
 
<h1>四．不抽离 webpack配置的方案antd(npm run build 后找不到图片路径，暂未解决)</h1>
cnpm install --save react-app-rewired customize-cra
cnpm install --save babel-plugin-import
 
<h2>1.配置less,less-loader</h2>
cnpm install --save less less-loader
 
<h2>2. 根目录新建config-overrides.js文件</h2>
<div class="cnblogs_code">
<pre>const { override, fixBabelImports, addWebpackAlias, addLessLoader } = require('customize-cra')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}

// addLessLoader 添加less的引用
// fixBabelImports 按需加载antd组件
// addWebpackAlias 路径别名配置
/* 路径别名配置 */
module.exports = override(
addWebpackAlias({
'@': resolve('src'),
components: resolve('./src/components'),
assets: resolve('./src/assets'),
static: resolve('./src/static'),
img: resolve('./src/static/img'),
js: resolve('./src/static/js'),
css: resolve('./src/static/css'),
}),
/* antd组件按需加载 */
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}),

);</pre>
</div>
 
<h2>3.  修改package.json文件，目录结构</h2>
 <img src="https://img2020.cnblogs.com/blog/1120896/202012/1120896-20201211163638270-1824149486.png">
 
 
<h2>4.  使用：页面引用less</h2>
import '@/static/css/index.less'
 
<h1>五．抽离 webpack配置的方案</h1>
npm run eject 
 <img alt="" loading="lazy" src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134552606-1378280926.png">
运行后会出现config文件夹，在里面配置less 和路径别名配置
<h2>1.配置less,less-loader</h2>
cnpm install --save less less-loader
在webpack.config.js里面进行less的配置
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134631160-366954168.png">
 
 
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134643570-642405530.png">
 
<h2>2.配置路径别名</h2>
在webpack.config.js里面进行路径别名的配置
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134653395-918250327.png">
 
<h1>六．打包</h1>
<h2>1.打包的准备工作：</h2>
在package.json,里面加上”homepage”:”.”
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134710265-2104485766.png">
 
在public里面加上main.js  和 package.json 和 preload.js
package.json
<div class="cnblogs_code">
<pre>{
"name":"crh_chat",
"version":"1.0-test",
"main":"main.js",
"author": {
 "name":"YOURNAME"
},
"license": "MIT"
}</pre>
</div>
 
main.js
如果需要引用一些模块就加入preload: path.join(__dirname, 'preload.js')，不用可以注释掉这段
<div class="cnblogs_code">
<pre>const electron = require('electron');
const path = require('path');
// 控制应用生命周期的模块
const { app } = electron;
// 创建本地浏览器窗口的模块
const { BrowserWindow } = electron;

// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;

function createWindow() {
// 创建一个新的浏览器窗口
win = new BrowserWindow({
width: 1920,
height: 1080,
autoHideMenuBar: true,
webPreferences: {
 preload: path.join(__dirname, 'preload.js')
}
});

// 并且装载应用的index.html页面
win.loadURL(`file://${__dirname}/index.html`);

// 打开开发工具页面
//win.webContents.openDevTools();
// 当窗口关闭时调用的方法
win.on('closed', () => {
// 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
// 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
win = null;
});
}

// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
}); */

// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
// 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit();
}
});

app.on('activate', () => {
// 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
// 窗口打开
if (win === null) {
createWindow();
}

});</pre>
</div>
 
 
preload.js 这里引入了electron，需要用的时候，window.electron
<div class="cnblogs_code">
<pre>global.electron = require('electron')

window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}

for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions)
}
})</pre>
</div>
 
有两个地方需要preload.js 外面那个是开发时要用的，public里面是打包后需要用到的。
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134805059-1289668382.png">
 
 
 
<h2>2.npm run build</h2>
成功后会出现build文件夹，双击index.html在浏览器打开，可以正常运行
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134825151-1999748602.png">
 
 
 
<h2>3.npm run package</h2>
在pacakge.json里面的scripts配置
 
"package": "electron-packager ./build package0514 --win --out package/ --arch=x64 --app-version=1.1.0 --electron-version=8.0.0"
 
然后 npm run package
成功后页面会生成一个package文件，里面有我们打包好的文件
 <img src="https://img2020.cnblogs.com/blog/1120896/202006/1120896-20200615134842704-1699406709.png">
  
来源：https://www.cnblogs.com/miam/p/13130509.html

頁: [1]

琼殿技术论坛's Archiver

React+electron项目搭建 打包

React+electron项目搭建打包