Ede's Blog

作为面向装逼编程的坚定的追随者，掌握几门工具，快速实现一些看起来高大上的功能，是不可或缺的优良品质。现我仅将一两门学（tou）来的手艺公布于此，以此感（hu）化（you）新教徒：

怎么搭建博客（hexo + github pages篇）
怎么构建命令行工具（npm篇）
怎么写Node插件（ c++篇）
怎么构建桌面应用（Electron篇）

前言

本文属于抛砖引玉型文章，每一点均可深入探索，在此不展开；

本文的命令均基于Mac进行，Win下有差异，自行搜索解决；

假如遇到问题，给一些思路：

保证网络顺畅可翻墙（或采用淘宝镜像）
Win下构建C++，npm install windows-build-tools（耗时几分钟到几个小时不等）
遇到权限问题，sudo + 命令或sudo chown -R ${whoami} ~/（掀桌子行为）
请确保语法、路径、项目名正确

怎么搭建博客

HEXO：快速、简洁且高效的博客框架

执行命令

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

github创建Repo
采用hexo-deployer-git

npm install hexo-deployer-git --save

修改_config.yml

deploy:
  type: git
  repo: [email protected]:wps-word-fe/blog.git # git repo地址
  branch: gh-pages

构建：hexo d
github会默认启用github pages：eg：https://wps-word-fe.github.io/blog/
假如没有绑定到更域名，需要更改root路径：/blog/（特指repo的名称）

怎么构建命令行工具

创建项目

mkdir cmd && cd cmd && npm init
mkdir bin && cd bin && touch ./resume.js

使用commander

npm install commander --save

#!/usr/bin/env node

// resume.js

const program = require('commander');

program.version('0.0.1').description('这是我的简历')
.option('-n, --nick', '我的名字')
.option('-a, --age', '我的年龄')
.option('-t, --total', '总览');

program.parse(process.argv);

if (program.nick) { console.log('乐乐');} 
if (program.age) { console.log('25'); }

if (program.total) { console.log(
`
姓名：李健乐
学校：山东大学 专业：软件工程
职业：前端工程师 工作经验：三年
特长：
    进能 搞不掂 我他妈今晚就不睡了
    退能 保进度 一板砖拍死测试再说
`
    )
}

测试

node ./bin/cmd.js --help
node ./bin/cmd.js -n # 乐乐
node ./bin/cmd.js -a # 25

发布

{
  "name": "@edeity/resume",
  "version": "0.0.1",
  "description": "my resume cmd",
  "main": "index.js",
  "bin": {
    "resume": "bin/resume.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "commander": "^2.20.0"
  }
}

# npm config set registry "https://registry.npmjs.org"
npm login
npm publish --access public
# npm unpublish --force
# npm config set registry "https://registry.npm.taobao.org"

测试

sudo npm install @edeity/resume --global
resume --help

怎么写Node插件

创建项目

mkdir addons && cd addons && npm init

binding.gyp

{
  'targets': [
    {
      'target_name': 'addons',
      'sources': [],
      "include_dirs" : [
        "<!(node -e \"require('nan')\")"
      ],
      'conditions': [
        ['OS == "mac"', {
          'sources': [
             'clipboard/cpb_mac.mm',
          ],
          'libraries': [
             '-framework AppKit',
            ]
        }],
      ],
    },
  ],
}

编写C++代码

#include <nan.h>
#include <AppKit/AppKit.h>

void Method(const Nan::FunctionCallbackInfo<v8::Value>& info) {
  v8::Local<v8::Array> fileArray = Nan::New<v8::Array>();

  NSPasteboard *pboard = [NSPasteboard generalPasteboard];

  // TODO Objective-C++ 自动引用回收问题
  // TODO NSPasteboardTypeFileURL 只支持 10.13 以及以后的版本
  NSString *fileURL = [pboard stringForType:NSPasteboardTypeFileURL];
  NSString *fileName = [pboard stringForType:NSPasteboardTypeString];

  if (fileURL != nil) {
    const char *fileUtf8Name = [fileName UTF8String];
    v8::Local<v8::String> tempName = Nan::New<v8::String>(fileUtf8Name).ToLocalChecked();
    Nan::Set(fileArray, 0, tempName);
  }
  info.GetReturnValue().Set(fileArray);
}


void Init(v8::Local<v8::Object> exports) {
  exports->Set(Nan::New("getClipboardFiles").ToLocalChecked(),
               Nan::New<v8::FunctionTemplate>(Method)->GetFunction());
}

NODE_MODULE(clipboard, Init)

构建：node-gyp、bindings

npm install node-gyp -g
npm install bindings nan --save
node-gyp configure
node-gyp build

测试

var clipboard = require('bindings')('addons');
const process = require('process');

if(process.platform === 'darwin') {
    console.log(clipboard.getClipboardData());
}

exports = module.exports = clipboard;

node index.js # your copy data

怎么构建桌面应用

用CRA构建一个应用

npx create-react-app electron-app && cd electron-app && npm start

声明electron入口main.js

// package.json
{
    // ...
    "main": "./public/electron.js",
      "homepage": "./",
}

// main.js
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
const url = require('url')
const IS_DEV = process.env.NODE_ENV === 'development'

let mainWindow

function createWindow() {
    const menu = Menu.buildFromTemplate([])
    Menu.setApplicationMenu(menu) // 设置菜单部分

    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 600,
        height: 400,
        title: '大哥大嫂过年好！',
        resizable: false,
        transparent: true,
        frame: false,
        titleBarStyle: 'customButtonsOnHover',
        // titleBarStyle: 'hidden',
        hasShadow: false,
        alwaysOnTop: true,
    })

    // 加载应用
    const staticIndexPath = path.join(__dirname, './build/index.html');
    const main = IS_DEV ? `http://localhost:3000` : url.format({
        pathname: staticIndexPath,
        protocol: 'file:',
        slashes: true
    })
    mainWindow.loadURL(main)

    mainWindow.on('closed', function () {
        mainWindow = null
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    app.quit()
})

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
})

测试：

npm install electorn -g
NODE_ENV=development electron .

构建

npm install electron-builder -g
rm -rf ./build && rm -rf ./dist
npm run build
electron-builder

那些没什么卵用的前端技巧

前言

怎么搭建博客

怎么构建命令行工具

怎么写Node插件

怎么构建桌面应用