Electron+React+WebRTC屏幕共享(1)：开发环境

很早之前就计划做一个基于 WebRTC 的屏幕共享程序，顺便假设一个 TURN 服务器，试试 WebRTC 流量中转。

简介

很久之前的计划，在此之前，我也开发过类似的 WebRTC 音视频共享，但只是一个很简单的一对一项目，没用上公网 TURN 服务器，也没时间细细研究，因此心里有点遗憾。

这次选定了Electron作为客户端载体，React用来开发界面，计划开发一个支持TURN服务器 + 房间的屏幕共享程序。

选择Electron是为了使用 WebRTC API，降低开发难度；选择React是为了组件化的 WEB UI 与自动渲染，省时省力。

在整个计划内，我会以系列文章(梓喵出没博客www.azimiao.com)的形式记录开发进度。

本期内容：搭建开发环境

开发环境很早前就搭好了，我也开发了一些内容，但是为了系列文章完整性，还是要专门列出来。

目前已做的内容预览：

配置 webpack 与 babel 等

webpack 用来打包我们的前端资源。在打包过程中，webpack 和 引入的插件会分析资源依赖，合并或压缩资源等。

Babel 是一个javascript编译器，他会把使用ES6及以上标准书写的代码转换成浏览器兼容的代码，我们的jsx文件就需要使用 babel 转换。

1. 配置 webpack
   webpack 配置教程全网都是，不过多描述，这里先展示目前的 rules:

   //梓喵出没博客(azimiao.com)
   rules: [
               {
                   test: /\.jsx?$/,
                   use: [{ loader: 'babel-loader' }],
                   include: defaultInclude
               },
               {//梓喵出没(azimiao.com)
                   test: /\.css$/,
                   use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
                   include: defaultInclude
               },
   
               {
                   test: /\.(jpe?g|png|gif)$/,
                   use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }],
                   include: defaultInclude
               },
               {
                   test: /\.(eot|svg|ttf|woff|woff2)$/,
                   use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }],
                   include: defaultInclude
               }
           ]
   

   为了打包成在Electron中运行的网页，需要声明target:

       target: 'electron-renderer'
   

   声明一个NODE_ENV参数，供其他脚本区分环境：

   //DefinePlugin允许我们创建全局变量[梓喵出没(azimiao.com)]
   plugins: [
       new HtmlWebpackPlugin(),
       new webpack.DefinePlugin({
           'process.env.NODE_ENV': JSON.stringify('development')
       })
   ],
   

   开发时运行webpack-dev-server，子线程(梓miao出没博客(www.azimiao.com))直接调起Electron:

   devServer: {
       contentBase: path.resolve(__dirname, 'dist'),
           stats: {
               colors: true,
               chunks: false,
               children: false
           },
           before() {
               spawn(
                   'electron',
                   ['.'],
                   { shell: true, env: process.env, stdio: 'inherit' }
               )
               .on('close', code => process.exit(0))
               .on('error', spawnError => console.error(spawnError))
           }
   }
   

2. 配置 Babel
   我们的 React 工程使用JSX编写，Babel 将会转换 JSX 文件，并吐出一个转换过的文件，供 webpack 继续干活。
   上文中， JSX 下面的 loader: 'babel-loader' 即声明了将JSX交给 Babel 处理。但是，纯 Babel 并不知怎么处理文件，需要我们配置 Babel 的配置文件.babelrc，将我们需要的预设或插件放进去。

   //本文来源：www.azimiao.com
   {
       "presets": [
         "@babel/preset-react"//预设，相当于官方的插件合集
       ],
       "plugins": ["@babel/plugin-proposal-class-properties"]//引入了一个插件，用于解析在 js 类中写的属性
   }
   

配置 package.json

1. 配置 Electron
   package.json中需要指定Electron的入口:

   "main": "main.js"
   

2. 配置 React
   package.json中需要指定homepage，这个路径将会加在webpack打包后的路径前面:

   "homepage": "./"
   

3. 配置 start 脚本
   webpack-dev-server具有修改内容自动编译并自动刷新的“热更新”功能，方便开发，因此，package.json中的start命令如下：

   "start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.development.config.js --mode development"
   

到这里，配置开发环境的核心内容就讲完了。