Electron --- Create-React-App + Antd + Electron 的搭建

步骤

创建 create-react-app-antd 项目

  1. git clone https://github.com/ant-design/create-react-app-antd
  2. npm install
  3. 将 webpack 所有内建的配置暴露出来, npm run eject, 如果发现错误,看下 package.json 里 eject 的脚本是不是为 react-scripts eject
  4. 修改 config-overrides.js
1
2
3
module.exports = function override(config, env) {
return config;
};
  1. 修改 webpack.config.js 里的 module.rules.oneOf 支持 css 和 less, 添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    {
    test: /\.(css|less)$/,
    use: [
    require.resolve('style-loader'),
    {
    loader: require.resolve('css-loader'),
    options: {
    importLoaders: 1,
    },
    },
    {
    loader: require.resolve('postcss-loader'),
    options: {
    // Necessary for external CSS imports to work
    // https://github.com/facebookincubator/create-react-app/issues/2677
    ident: 'postcss',
    plugins: () => [
    require('postcss-flexbugs-fixes'),
    autoprefixer({
    browsers: [
    '>1%',
    'last 4 versions',
    'Firefox ESR',
    'not ie < 9', // React doesn't support IE8 anyway
    ],
    flexbox: 'no-2009',
    }),
    ],
    },
    },
    {
    loader: require.resolve('less-loader'),
    options: { javascriptEnabled: true }
    },
    ],
    }
  2. 修改 start.js 注释掉下面代码关闭项目启动自动打开浏览器

1
// openBrowser(urls.localUrlForBrowser);
  1. package.json 添加 "homepage": "." ,防止打包后的静态文件 index.html 引入 css 和 js 的路径错误

  2. App.less 修改为 @import '~antd/dist/antd.less';

添加 electron

  1. package.json 添加 "main": "main.js", 和 electron 依赖
1
2
3
4
5
6
{
"main": "main.js",
"devDependencies": {
"electron": "^6.0.7"
}
}
  1. 创建 main.js,添加以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const {app, BrowserWindow, Menu} = require('electron');

let win;

let windowConfig = {
width: 800,
height: 600,
title: "Joy Security",
};

let menuTemplate = [{
label: 'Joy Security',
submenu: [{
label: '退出',
role: 'quit'
}, {
label: `关于 ${windowConfig.title}`,
role: 'about'
}]
}];


app.on('ready', createWindow);

app.on('window-all-closed', () => {
app.quit();
});

app.on('activate', () => {
if (win == null) {
createWindow();
}
});


function createWindow() {
// 隐藏菜单栏,兼容 MAC
Menu.setApplicationMenu(Menu.buildFromTemplate([]));

win = new BrowserWindow(windowConfig);

win.loadURL('http://localhost:3000');

win.on('close', () => {
//回收BrowserWindow对象
win = null;
});

win.on('resize', () => {
// win.reload();
});

}

  1. package.json 更改脚本
1
2
3
4
5
6
7
{
"scripts": {
"react-start": "node scripts/start.js",
"eletron-start": "electron .",
"react-build": "node scripts/build.js",
}
}
  1. 启动时先 react-start 再 eletron-start 即可看到效果