Electron+React+WebRTC screen sharing (1): development environment
brief introduction
Content of this issue: building the development environment
Configure webpack, babel, etc
-
Configure webpack
The webpack configuration tutorial is available on the whole network, but there are many descriptions. Here are the current rules: //Zimiao haunting blog (azimiao. com) rules: [ { test: /\.jsx?$/, use: [{ loader: 'babel-loader' }], include: defaultInclude }, {//Zimiao haunts (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 } ] To be packaged in Electron The web page running in needs to be declared target : target: 'electron-renderer' Declare a NODE_ENV Parameters for other scripts to distinguish between environments: //DefinePlugin allows us to create global variables [Zimiao. com] plugins: [ new HtmlWebpackPlugin(), new webpack.DefinePlugin({ 'process.env. NODE_ENV': JSON.stringify('development') }) ], Run at development time webpack-dev-server , sub thread (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)) } } -
Configure Babel
Our React project uses JSX Written, Babel will convert JSX files and spit out a converted file for webpack to continue working.
In the above, the loader: 'babel-loader' That is to say, it will JSX Give it to Babel for processing. However, pure Babel does not know how to handle files. We need to configure Babel's configuration files .babelrc , put in the preset or plug-in we need. //Source: www.azimiao.com { "presets": [ "@ babel/preset read"//By default, it is equivalent to the official plug-in collection ], "Plugins": ["@ babel/plugin proprietary class properties"]//A plug-in is introduced to parse the attributes written in the js class }
Configure package.json
-
Configure Electron
package.json It needs to be specified in Electron Entrance to: "main": "main.js" -
Configure React
package.json It needs to be specified in homepage , this path will be added to webpack In front of the packed path: "homepage": "./" -
Configure the start script
webpack-dev-server It has the "hot update" function of automatically compiling and refreshing the modified content, which is convenient for development. Therefore, package.json In start The command is as follows: "start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.development.config.js --mode development"