Electron --- Create-React-App + Antd + 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 即可看到效果