前者打包改成桌面应用、以及chrome扩展。如何开始。

     前段时间在用工作的余支了tomato
timer这个蕃茄钟,然后部署及github.io上,由于greatway太狠心,偶尔会起从不上马之气象。上周末对比做了扩大以及改良,使其成chrome的插件,或者成为桌面app。

率先下载node.js安装,其中node.js包含了一个npm,这是一个装置包之保管模块,然后以npm所在的门道在环境变量path中,这样即便好一直当控制台调用npm安装软件,

chrome插件的动以及支出

C:\Program Files\nodejs下发生一个npm.bat,将这路在path中

相同、如何设置和使用:

1、下载tomato timer项目,github地址
https://github.com/cqhaibin/tomato-timer.git

2、切换到V2.0.0.0的tag,然后使下图所安排:

必威 1

3、然后单击 “小飞”图标即可使,界面如下图:

必威 2

随即要下载Electron,一般的做法是起镜像下载,不是Electron的镜像,而是安装npm镜像
老大要紧的相同步,一定要是因此管理员权限打开cmd,然后输入

第二、打包源码简单介绍

本chrome插件的兑现思路:插件开发是透过vue、vuex等实现之;然后经rollup打包改成一个独自的js文件(tomatoTimer.js);最后安排chrome插件的manifest.json文件即可。

1、如何通过rollup把vue项目独立于包改成一个js文件,代码有如下:

npm install cnpm -g
–registry=http://registry.npm.taobao.org

 

var VueLoader = require('rollup-plugin-vue');
var Resolve = require('rollup-plugin-node-resolve');
var Commonjs = require("rollup-plugin-commonjs");
var replace = require('rollup-plugin-replace');
var path = require('path');
var babel = require('rollup-plugin-babel');
var paths = require("./paths");
var rollup = require('rollup');
var type = process.env.TYPE;

let config = {
    entry: path.resolve(__dirname, paths[type].source),
    plugins: [VueLoader(), babel({
      exclude: 'node_modules/**' // only transpile our source code
    }), Resolve({
    // pass custom options to the resolve plugin
    customResolveOptions: {
      moduleDirectory: 'node_modules'
    },
    jsnext: true,
    main: true,
    browser:true
  }), Commonjs(), replace({
    'process.env.NODE_ENV': JSON.stringify('development'),
    'process.env.VUE_ENV': JSON.stringify('browser')
  })]
};
rollup.rollup(config).then(function(bundle){
    bundle.write({
        format: 'iife',
        moduleName: "tomato",
        sourceMap: true,
        dest: path.resolve(__dirname, paths[type].dest)
    });
});

这边用了rollup-plugin-replace插件替换vue中的片配置,不加此插件在browser中运行时会见报错。

2、对vue的援得留意,由于vue2.0开,vue提供的文本分为runtime、compile等类别,所以要直接指定,如下代码所示:

import Vue from 'vue/dist/vue.js';

夫代码在档次之aloneindex.js文件被。

  1. chrome插件的安排

    {

     "manifest_version": 2,
     "name": "tomato timer",
     "version": "1.0.0.0",
     "description": "tomato timer",
     "icons": {
         "16": "icons/tomatotimer-16.png",
         "48": "icons/tomatotimer-48.png",
         "64": "icons/tomatotimer-64.png",
         "128": "icons/tomatotimer-128.png"
     },
     "author": "sam long",
     "permissions": [
         "tabs", //可访问tab
         "storage" //可以访问本地存储
     ],
     //右键单击右上角插件logo时,弹出的窗口
     "options_page": "view/options.html",
     //左键单击右上角插件logo时,弹出的窗口
     "browser_action": {
         "default_icon": {
             "38": "icons/tomatotimer-48.png"
         },
         //"default_popup": "view/popup.html",
         "default_title": "tomato timer"
     },
     //后台运行的js进程对象
     "background": {
         "scripts": ["background.js"],
         "persistent": false
     },
     "content_security_policy": "script-src 'unsafe-eval'; object-src 'unsafe-eval'"
    

    }

本条布局只是实现一个chrome插件的简练布置,更多安排可以参照baidu。其中较关键呢background节点的布,因为他能响应chrome插件上的一言一行,如你单击浏览器地址栏旁边的图标事件就得于斯文件中抓获。background.js代码如下:

chrome.browserAction.onClicked.addListener(function(tab) {
    var destUrl = './index.html';
    chrome.tabs.create({ url: destUrl });
});

下一场则是content_security_policy节点,他简称csp策略,默认chrome插件才会加同域下之平安文件夹下的js。所以这里设设置unsafe-eval。更多安排如下:

说明
self 同域(默认)
unsafe-inline 行内js可以执行
unsafe-eval 本地js文件可以执行
none  
  1. 注意

    1.
browser_action中的default_popup有布置值时,chrome.browserAction.onClicked.addListener事件不会见让触发

诸如此类便可以用cnpm来安装软件了,这样看的是淘宝之镜像库,也就是说访问的凡国内的,速度会快多
紧接着,便是安装Electron了

桌面App打包

同、此包需要设置如下两独npm包:

electron:可拿前端项目包装成一个桌面app,并且他尚提供了同样体系的针对操作系统的顾

electron-packager:发布桌面app

其次、安装好后,对package.json文件进行如下配置

"name": "simple",
"version": "1.0.0",
"main": "electron/main.js",

即时三个节点是必须的,且main会作为electron的入口文件。

三、运行.\node_modules\.bin\electron . 即可见到如下界面:
必威 3

季、利用electron-packager打包,输入如下命令后,就等候他的完成吧。

.\node_modules\.bin\electron-packager . tomatoTimer –out ./outApp

 

补充:

而打包时间过长,或者直接打包失败(尤其是在windows平台),有如下两栽情况:

  1. 运用的凡cnpm进行的管教安装,由于cnpm安装是扁的,一下子展开node_modules文件夹太多,很有或时间了长还是失败
  2. 并未忽视掉node_moduels中之管,使用如下命令忽略掉node_moduels包: electron-packager ./ tomatoTimer --out ./outApp --overwrite --ignore=node_modules

 

cnpm install electron -g

伺机下充斥了晚,输入Electron -v假设出口版本号,则证实安装成功了

就创建一个app应用,可以以随意地方创造一个app文件夹,里面创建三只文件,一个js,一个html,一个json文件

npm install –save-dev
electron-packager将electron-package安装到路之不二法门下
或者 npm install electron-package -g 全局安装

接下来可以用electron-packager来生成梯次平台的昭示文件,比如windows的exe文件

electron-packager <location of project> <name of project>
<platform> <architecture> <electron
version><optional options>
令说明:

  • location of project:项目所当路子
  • name of project:打包的种类名字
  • platform:确定了而如果构建哪个平台的采用(Windows、Mac 还是 Linux)
  • architecture:决定了采取 x86 还是 x64 还是少单架构都因此
  • electron version:electron 的版本
  • optional options:可选选项

接着在变化无常的目下,找到resources文件夹,下面有一个app文件夹,在此打开cmd,

故asar pack app
app.asar生成一个asar的保险,将app文件夹去,这样就非会见暴露源码了
asar pack app app.asar中之app是因文件夹的称

运用electron打包桌面应用

相关文章