Reference website:
Https://www.npmjs.com/package/babel-loader
Https://www.npmjs.com/package/gulp
Https://www.npmjs.com/package/gulp-webpack
Create a new Folder
Installing Gulp
Installing Gulp-webpack
Create a Gulpfile file
and write
1 /**2 * Created by Administrator on 2016/11/16.3 */4Const GULP = require ("Gulp");5Const WEBPACK = require ("Gulp-webpack");6 7Gulp.task ("copy_html",function () {8GULP.SRC ("src/*.html"). Pipe (Gulp.dest ("Build")));9 });Ten OneGulp.task ("Copy_package",function () { AGULP.SRC ("Src/package.json"). Pipe (Gulp.dest ("Build"))); - }); - theGulp.task ("Com_js",function () { -GULP.SRC ("Src/index.js"). Pipe (Webpack ({ - output: { -FileName: "Index.js" + }, - module: { + Loaders: [ A { atTest:/\.js$/, -Loader: ' Babel ',//' Babel-loader ' is also a valid name to reference - query: { -Presets: [' es2017 '] - } - } in ] - }, to externals: { +Electron: "Require (' electron ')", -Path: "Require (' path ')", theURL: "Require (' URL ')" * } $}). Pipe (Gulp.dest ("Build")));Panax Notoginseng }); - theGulp.task ("Copy_main",function () { +GULP.SRC ("Main.js"). Pipe (Gulp.dest ("Build"))); A }); the +Gulp.task ("Default", ["copy_html", "Copy_package", "Com_js", "Copy_main"]);
Installing Babel
Now look at the directory structure
Description, the purpose is to put the src file and the Main.js file into the build folder by compiling
Main.js Code
1 /**2 * Created by Administrator on 2016/11/16.3 */4const {app, Browserwindow} = require (' electron '))5Const PATH = require (' path ');6Const URL = require (' URL ');7 8 //Keep A global reference of the Window object, if you don ' t, the window would9 //Be closed automatically if the JavaScript object is garbage collected.Ten Let win; One A functionCreateWindow () { - //Create the browser window. -Win =NewBrowserwindow ({width:800, height:600}) the - varfilepath = Path.join (__dirname, ' index.html '); - - Console.log (filepath); + - //and load the index.html of the app. + Win.loadurl (Url.format ({ APathname:path.join (__dirname, ' index.html ')), atProtocol: ' File: ', -Slashes:true - })); - - //Open the DevTools. - win.webContents.openDevTools (); in - //emitted when the window is closed. toWin.on (' Closed ', () = { + //dereference The Window object, usually you would store windows - //in a array if your app supports multi windows, this is the time the //When you should delete the corresponding element. *Win =NULL $ })Panax Notoginseng } - the //This method is called when Electron has finished + //Initialization and is ready to create browser windows. A //Some APIs can only is used after this event occurs. theApp.on (' Ready ', CreateWindow) + - //Quit When all Windows is closed. $App.on (' window-all-closed ', () = { $ //On MacOS It's common for applications and their menu bar - //To stay active until the user quits explicitly with CMD + Q - if(Process.platform!== ' Darwin ') { the app.quit () - }Wuyi }); the -App.on (' Activate ', () = { Wu //On MacOS It's common to re-create a Windows in the app when the - //dock icon is clicked and there am no other windows open. About if(Win = = =NULL) { $ CreateWindow () - } -});
The contents of the Packjson file under src:
1 {2 "Scripts": {3 "starts": "Electron." 4 }, 5 " Name ":" Application-name ",6 " version ":" 0.0.1 ",7 " main ":" Main.js "8 }
Console input
Compiling the file gulp (under the main file)
Open the build file CD build
Run the electron.
Results
The last note: After compiling the gulp, it is possible to have the can not find module, the solution, install the missing modules.
Gulp-webpack Engineering Realization of electron