Electron杂项

本来认为这应该是一个很简单的事, 但是, 忽然发现需要写个专题

基础观念

• Turns out Apple uses a plist to associate filetypes with apps. This plist is read and ‘activiated’ when an app is dragged into the Applications folder. So, you have to modify the plist. Trouble is, you have to do this beforesigning your app (if you’re doing that). I wrote a gulp task that does it for me. It runs after build but beforesigning. (replace all of the myfiletype’s with your file extension)
• 参考链接在本文尾部, 关键字: double-click to open files into electron app

我的第一个问题

• 我的貂蝉(app)在哪里????
• 一直用electron .运行我的代码, 木有见过app啊
• 终于官网找到了描述: Application distribution

简单的说做一个app拢共分3步

1. 下载electron的prebuilt binaries
2. 自己写的代码的目录应该叫app, 奶奶的, 为毛早不说????
   1. 摆成类似这样: electron/Electron.app/Contents/Resources/app/package.json
   2. 然后这个整个electron目录(根目录这个, 不是electron.app)就是你的发布目录.
   3. 到此为止, 还是木有弄出app, 对吧.
3. rebrand 涂装你的app
   1. rename eletron.app
   2. 修改plist
      1. 地址
         1. Electron.app/Contents/Info.plist
         2. Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
      2. 内容
         1. CFBundleDisplayName
         2. CFBundleIdentifier
         3. CFBundleName
   3. 修改helper
      1. 这里依旧要改一大堆
      2. 基本看到这里, 我已经疯了

前面的思路放弃了, 还有更难得思路, 从源代码开始做涂装, 深入到c++的领域. 这个…….. 除非你想成为electron专家.

那么, 就剩下一条路了: 用工具

参考:

• https://discuss.atom.io/t/double-click-to-open-files-into-electron-app/21713/6
• https://electronjs.org/docs/tutorial/application-distribution

工具思路

一共三个, 咱么一个一个来

• electron-forge
• electron-builder
• electron-packager

forge (第一个工具)

1. 安装: npm install -g electron-forge
2. 初始化: electron-forge init my-new-app
3. 启动应用: npm start
4. 引入一个已经存在的项目: electron-forge import existing-project-directory
5. 参考: https://github.com/electron-userland/electron-forge

我的步骤

1. electron-forge是后面的一个常用命令因此, 我添加了shell alias: alias ef=”/usr/local/bin/electron-forge”
2. 安装换成cnpm 没毛病.
3. 没敢用import, 先ef init一个试试. 果然报错.
   1. 需要先安装: electron-prebuilt-compile
   2. -g安装上面这个之后, 竟然貌似就好了.
4. 然后, npm start 可以运行但是感觉比我原本的(electron .)方式要慢一些
   1. 看了一下, 项目依赖真的感人. 决定再次测试下.
   2. 再次测试也是正常的.
   3. 看到项目的依赖如此感人, 以及package.json如此丰富, 决定放弃import的做法, 未来, 我手工copy代码过来.
   4. 测试了一下(electron .) 也是可以的.
   5. electron-forge start. 也是可以的. ef start
5. 打包试试 ef package,
   1. 果然这样就能打出一个app包.
   2. 而且还做了菜单替换,
      1. 默认菜单 electron->项目名.
      2. 其他的默认菜单都被移除了.
6. 发布一个试试 ef make
   1. 这个命令默认是打一个zip包.
   2. 可以通过配置文件打更多种类的包, 比如dmg.
7. 还可以lint项目 ef lint
8. 还可以直接发布(默认目标是github) ef publish

debug

• 这样启动: electron-forge start –inspect-electron
• 可以用xcode或者webdriver来测试.
• vscode需要配置

//放到vscode的launch config里面
//.vscode/launch.json 貌似是这样的
{
  "type": "node",
  "request": "launch",
  "name": "Electron Main",
  "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-forge-vscode-nix",
  "windows": {
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-forge-vscode-win.cmd"
  },
  // runtimeArgs will be passed directly to your Electron application
  "runtimeArgs": [
    "foo",
    "bar"
  ],
  "cwd": "${workspaceRoot}"
}

electron-forge是以electron-packager为基础的

electron-builder (第二个工具)

//写到package.json里面
"build": {
  // ...
  "fileAssociations": [{
    "ext": "xyz",
    "name": "XYZ File",
    "role": "Editor"
  }]
}

• https://stackoverflow.com/questions/42756982/how-do-you-specify-a-custom-file-extension-in-an-electron-app?rq=1
• https://www.electron.build/configuration/configuration

我们应该选择electron-builder吗?

• Stack Overflow推荐:https://stackoverflow.com/questions/37113815/electron-builder-vs-electron-packager
• If you really want to go to town, take a look at electron-builder which takes the packages produced by electron-packager and creates automated installers.
• Electron-builder has been robustly worked on over the past year, pushing out new versions with features and bugfixes weekly. The documentation at https://www.electron.build/ is excellent, and following the “Quick Setup Guide” (on the first page, several sections down) includes a boilerplate project and step-by-step instructions.

electron-builder 唯一的选择

• 他满足了需求: 至少要把文件和app能关联, 实现我之前的double-click打开文件的需求.
• 安装推荐用yarn: yarn add electron-builder –dev

yarn是啥?

• https://yarnpkg.com/en/
• 通过brew安装: brew install yarn
• 测试是否安装: yarn –version

yarn之后出了问题

• 我在自己的工作目录 electron . 或者npm start时

• App threw an error during load

  Error: Couldn’t find preset “env” relative to directory

• yarn说

  1. 在工作目录下面yarn 安装依赖包.
  2. yarn run start 就是执行我的脚本了.

仔细看看报错:

electron .                                                        master 

App threw an error during load
Error: Couldn't find preset "env" relative to directory "/Users/machangkun/Documents/_X/_知网justdoit/doing master/try"
    at /usr/local/lib/node_modules/electron-prebuilt-compile/node_modules/_babel-core@6.26.0@babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (/usr/local/lib/node_modules/electron-prebuilt-compile/node_modules/_babel-core@6.26.0@babel-core/lib/transformation/file/options/option-manager.js:275:20)
我们发现报错在/usr/local/lib/node_modules/electron-prebuilt-compile 难道是我之前全局安装的electron-prebuilt-compile引发了问题?

尝试按照elctron-builder的标准流程处理下.

1. brew install yarn 已经做过了.
2. yarn add electron-builder –dev

实际工作步骤

1. brew yarn了一下, 然后就挂了.
2. 在工作目录 yarn了一下, 巨慢. 估计是大墙的原因.
3. 卸载全局包, 试试: cnpm uninstall -g electron-prebuilt-compile
4. 然后没有效果, 试试直接用npm: npm uninstall -g electron-prebuilt-compile
5. 这个更牛逼, 卸载之后, 啥都没有了, electron . 都没有了, 提示: 没有这个命令.
6. 然后重新开始了一遍, 参考隔壁的blog: electron再次从头开始.

然后

1. 决定暂时不理会electron-prebuilt-compile: https://github.com/electron-userland/electron-prebuilt-compile
2. yarn和npm完全兼容. 所以可以直接用, 甚至一个项目中, 某些人用yarn, 其他人用npm都没啥问题. https://yarnpkg.com/lang/zh-hans/docs/migrating-from-npm/
3. 就像npm start一样, yarn 也可以忽略中间的run, 直接yarn start. https://yarnpkg.com/zh-Hans/docs/cli/run
4. yarn的中文文档真不错, 比electron好100倍.

教训: 不要全局安装, 尽量别用npm install -g…….

回到electron-builder的安装

1. yarn add electron-builder –dev

在一个项目中实验:

1. 参考: https://github.com/electron-userland/electron-webpack-quick-start
2. 下载文件
3. yarn
4. yarn dev 就可以在开发模式运行
   1. “dev”: “electron-webpack dev”,
5. yarn compile 编译 貌似没啥用
   1. “compile”: “electron-webpack”,
6. yarn dist 第一次失败了, 第二次开全局翻墙试试.
   1. “dist”: “yarn compile && electron-builder”,
   2. ss全局都不行, 换了云墙貌似正常了.
   3. 然后就成功的打了zip和dmg包.
7. yarn dist:dir
   1. “dist:dir”: “yarn dist –dir -c.compression=store -c.mac.identity=null”
   2. 这个是打一个mac下面的app

这是一个webpack项目

• webpack 一个打包构建工具
• babel 一个翻译工具能把es6翻译成es5, 这样我们就可以提前使用最新的各种语法糖
• eslint 貌似一个语法检查工具

webpack/browserify不等于gulp

• gulp等于是一个命令行的新的写法.
• webpack专注于打包
• browserify和webpack很像

知乎有答案

• https://www.zhihu.com/question/37694275
• node , 是javascript语言的环境和平台，
• npm , bower, yarn 是一类，包管理，
• webpack , browserify , rollup是一类，javascript模块打包方案(方案+工具+插件)，
• babel , 编译(compiler)下一代的ES语法的插件
• requirejs , seajs , 是一类, 基于commonjs，amd，cmd，umd 之类的模块类包加载方案的框架，
• grunt , gulp , 前端工具，结合插件，合并、压缩、编译 sass/less，browser 自动载入资源，
• react , angular , vue , backbone , 是一类，mvc , mvvm , mvp 之类的前端框架，
• jquery , zepto , prototype , 是一类，前端 DOM , BOM 类库 ，
• ext , yui , kissy , dojo , 是一类，前端应用组件，
• lodash , underscore , 函数式编程库。

react

• 之间推荐阮一峰的: http://www.ruanyifeng.com/blog/2015/03/react.html

React-Native

• 这个厉害了, 用js搞定ios和android开发

为啥我们需要webpack

• 就是因为像react, babel, sass这样的东西很多.
• css也模块化了.
• 自己搞会累死.
• 因此自动化了.