Electron 编译

孔方兄_

9765人浏览 · 2016-04-11 17:16:50

孔方兄_ · 2016-04-11 17:16:50 发布

转自：http://www.crabx.site/u/zerocode1337/2016-1-12/5694bc70aa2843950acd553a

参考：https://chromium.googlesource.com/chromium/src/+/master/docs/windows_build_instructions.md

前言：　electron是atom的兄弟开源项目,与NW.js类似，可以让用户使用web技术，创建跨平台的桌面应用，electron使用chromium内核、V8引擎和node.js构建，由于产品需求，官方的版本无法满足功能上的需求，所以我们需要修改chromium内核达到我们的功能需求（在body中插入一行js代码）。本文只针对编译过程中遇到的问题做些说明，对内核修改不做赘述，旨在记录大项目编译过程心得，以为今后版本升级、维护、扩展性开发提供参考。

请确保所有工作是在稳定VPN环境下，否则中间会出现各种问题

解决部分环境依赖问题

linux(ubuntu)

python 2.7x
node.js v0.12.x
Clang 3.4 or later　这个编译器会在执行脚本的时候自行下载更新
Development headers of GTK+ and libnotify.

在ubuntu上需要安装下列库执行下述命令

sudo apt-get install build-essential clang libdbus-1-dev libgtk2.0-dev \
                       libnotify-dev libgnome-keyring-dev libgconf2-dev \
                       libasound2-dev libcap-dev libcups2-dev libxtst-dev \
                       libxss1 libnss3-dev gcc-multilib g++-multilib

一般linux 自带python,所以只需要安装node.js即可（最好安装v 5.x版本）

windows

windows7 / Server 2008 R2 or highter
Visual Studio 2013 Community versioin is ok
Python 2.7
Node.js
Git

系统必须问英文语言，这在chromoum编译中尤为重要，必须安装vs2013(除了2013别的目前请不要尝试)，python　node.jsGit 直接去官网下，傻瓜式安装，不过python 需要配置环境变量。

mac

ox x >= 10.8
Xcode >= 5.1
node.js v5.X
pyobjc

pyobjc 的安装可以尝试如下命令

$ sudo easy_install -U pyobjc-core
$ sudo easy_install -U pyobjc

如果出现错误，需要前往下面网址下载，没错误请忽略

pyobjc-core

pyobjc-framework-Cocoa

pyobjc-framework-Quartz

分别解压后执行如下命令

python setup.py install

electron源码下载

linux mac win都执行如下命令即可,特别提示：windows最好使用git GUI 命令行工具

$ git clone https://github.com/atom/electron.git

启动python脚本

　在electron目录下有script文件夹，bootstrap.py脚本会自动下载所需依赖,前提是有python2.7.

执行如下命令

$ cd electron
$ ./script/bootstrap.py -v　　//（linux 和　mac 下执行这个命令）
$ python ./script/bootstrap.py -v //(windwos下执行这个命令)

这个过程会很久，linux下首先会更新当前环境中的clang（这步有错误就多换几个代理），mac和win类似，然后会更新一些依赖并下载chromium库。我们发现下载的chromium库是atom下的另一个子项目，所以这步是分水岭。

替换libchromium

上步说到，chromium库是atom下的另一个子项目，我们可以通过链接访问github项目主页，这个其实就是electron所需要的对应版本的chromium内核。写文档时编译的版本为 47.0.2526.73

下载

执行　git clone https://github.com/atom/libchromiumcontent.git 将项目下载到本地目录，打开目录

执行如下命令：

$ script/bootstrap   //（linux or mac）
$ python script/bootstrap  //（windows）

更新

然后下载源码，更新组件和依赖,大约40分钟

$ script/update -t x64   //(linux or mac)
$ python script/update -t x64  // (windows)

编译

最后编译，大约２－３个小时

$ script/build -t x64   //(linux or mac)
$ python script/build -t x64   // (windows)

定制

以上工作只是编译官方给出的chromium版本内核，我们还需要修改源码，再编译（不要担心，再编译速度会很快）

研究后我们发现有个vender/chromium/src目录，这是放源码的地方。打开vendor/chromium/src/third_party/WebKit/Source/core/html/parser,将事先准备的代码手动修改（不能直接替换，最好根据git diff 来手动修改）。

修改完毕后，再次执行编译命令

$ script/build -t x64   //(linux or mac)
$ python script/build -t x64  //(windows)

替换相应文件到electron

接下来就可以替换我们编译好的文件到electron目录了在linux平台上找到以下7个文件

./out/Release/libwebcore_rendering.a
./out/Release/libwebcore_generated.a
./out/Release/libwebcore_html.a
./out/Release/libwebcore_remaining.a
./out/Release/libwebcore_dom.a
./out/Release/libwebcore_svg.a
./out_component/Release/lib/libwebcore_shared.so

如果是windows平台找到

./out/Release/webcore_rendering.lib
./out/Release/webcore_generated.lib
./out/Release/webcore_html.lib
./out/Release/webcore_remaining.lib
./out/Release/webcore_dom.lib
./out/Release/webcore_svg.lib
./out_component/Release/webcore_shared.dll
./out_component/Release/webcore_shared.dll.lib

如果是mac平台找到

./out/Release/libwebcore_rendering.a
./out/Release/libwebcore_generated.a
./out/Release/libwebcore_html.a
./out/Release/libwebcore_remaining.a
./out/Release/libwebcore_dom.a
./out/Release/libwebcore_svg.a
./out_component/Release/lib/libwebcore_shared.dylib

以linux为例说明如何替换将以上所有.a文件替换到electron的　/vendor/brightray/vendor/download/libchromiumcontent/static_library目录里将.so 文件替换到electron的　/vendor/brightray/vendor/download/libchromiumcontent/shared_library目录里