[Electron入门篇-1]electron环境搭建及利用babel实现react无缝结合

这几天准备搞一个内部的运维桌面APP,听说桌面开发这块electron很火（VSCODE都是用它做的！）,于是选型就用它了，嗯，实际上是因为：原生开发真的没人会啊！

electron环境搭起来还是没有任何难度的，网上攻略一搜一大堆，这里就不再赘述了。

懒得百度的，传送门：http://www.cnblogs.com/buzhiqianduan/p/7620099.html

主要焦点在于和react结合，因为electron内置的浏览器内核是不支持ES6、JSX、Promise等语法的，所以如何直接使用react/vue等框架来开发electron应用就成了难题。

网上的方案有两种，一般是用webpack或其他打包工具，配合npm命令，在启动时第一步打包出dist的文件，第二步启动electron加载打包后文件，实现结合。

其实根本不用这么麻烦，利用强大的babel，我们可以动态转换ES6/JSX/Promise等语法为ES5语法，实现无缝结合，具体环境搭建步骤如下：

1.初始化项目并npm install

直接下载electron-quick-start，因为这里面已经有了基础的文件和目录结构，省时省力，传送门：https://github.com/electron/electron-quick-start

然后修改项目名为你自己的名字，再修改package.json，加入babel&react&electron等依赖，npm install需要的所有npm包，如果太慢可使用cnpm，package.json文件内容如下

	"devDependencies": {
		"electron": "^3.0.7"
	},
	"dependencies": {
		"@babel/core": "^7.1.2",
		"@babel/plugin-proposal-class-properties": "^7.1.0",
		"@babel/plugin-transform-runtime": "^7.1.0",
		"@babel/preset-env": "^7.1.0",
		"@babel/preset-react": "^7.0.0",
		"@babel/register": "^7.0.0",
		"@babel/runtime": "^7.1.5",
		"react": "^16.6.0",
		"react-dom": "^16.6.0"
	}

2.配置babel

目前最新的babel7，配置起来比老版本要方便很多，在根目录中添加.babelrc文件即可，且所有的模块都统一使用@babel/XXX来使用与配置，可以支持所有es6&react&Promise等语法的.babelrc内容如下：

{
	"presets": ["@babel/preset-env", "@babel/preset-react"],
	"plugins":["@babel/proposal-class-properties",
   [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

关于配置文件内容可参考网上教程，这里不详细展开了，简单来说 presets里的两个配置：preset-env用来支持ES6语法，preset-react用于支持react语法，插件里的proposal-class-properties用于支持class语法，plugin-transform-runtime用于支持将一些新的全局对象，如Promise等动态编译成ES5语法，以及一些全局对象的新增方法使用。

3.编写React Component

重点来啦，通过入门学习，我们都知道main.js是总的入口，quick-start里main.js是加载的index.html，本例中不需修改，重点是要修改index.html，为了方便管理，我们最好把react的组件都放在一个目录里，所以现在我们在根目录上新建一个目录scripts，用于存放react的所有组件,并添加start.js，start.js里注册根组件为App，并render到root div中

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


class App extends Component {
	constructor(props) {
		super(props);
	}

	render() {

			return (
			
 this is react-electron!
			);
	}
}

ReactDOM.render(
		   ,
	document.getElementById('root')
);

那么此时目录结构为：

4.编写index.html和index.js

index.html将作为整个app的主页面，代码非常简单，引入react组件+引入babel-register+留好root div即可，babel-register用法很简单，就是在你require ES6语法文件的同时，也require它即可，它会在require上留一个钩子，将所有require进来的js文件都做编译转换为ES5语法：

接下来因为都用的默认配置，所以也不用特别修改了，运行npm start，显示文字，成功！

想直接使用的，可以直接github直接下载我的项目 https://github.com/lcg890831/react-electron-quick-start

下载下来npm install后，就可以在scripts里愉快的写自己的react代码啦！