-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathget_more_by_node.html
1 lines (1 loc) · 25.8 KB
/
get_more_by_node.html
1
<!doctype html><html lang="zh-CN" class="night"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,maximum-scale=4,user-scalable=0" name="viewport"><title>Ede's Blog</title><meta name="description" content="Try to be a qualified programmer"><meta property="og:type" content="website"><meta property="og:description" content="Try to be a qualified programmer"><meta property="og:title" content="Ede's Blog"><meta property="og:site_name" content="Ede's Blog"><meta property="og:url" content="https://ede.ink"><meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="mainfest" href="/mainfest.json"><link rel="stylesheet" href="/public/css/common.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css"><script>!function(){var e=-1!==window.location.search.indexOf("theme=night")||"night"===window.localStorage.getItem("edeity-theme_theme"),t=-1!==window.location.search.indexOf("theme=light")||"light"===window.localStorage.getItem("edeity-theme_theme");(new Date).getHours();var n=document.querySelector("html");e?n.classList.add("night"):t?n.classList.remove("night"):n.classList.add("night")}(),document.addEventListener("DOMContentLoaded",function(){null!==document.querySelector("ol.toc")&&(document.querySelector("#nav-bar").style.cssText="display: block")})</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-M3J9QSEE2Z")</script><meta name="generator" content="Hexo 5.0.0"></head><body><div class="loading"></div><div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div><header class="fullscreen"><div class="toolbar"><i class="iconfont icon-menu"></i></div><h1><a href="/">Ede's Blog</a></h1><div class="head-link"><a class="btn waves" href="/"><span><i class="iconfont icon-home">Home </i></span></a><a class="btn waves" href="/about/index.html"><span><i class="iconfont icon-me">About </i></span></a><a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink"><span><i class="iconfont icon-github">Github</i></span></a></div></header><div class="some-link"><a class="btn" id="light-or-not"><i class="iconfont icon-light"></i> </a><a style="display:none" class="btn" id="up-to-top"><i class="iconfont icon-up"></i></a></div><div id="nav-bar" style="display:none"><div class="toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2"><span class="toc-number">2.</span> <span class="toc-text">怎么搭建博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7"><span class="toc-number">3.</span> <span class="toc-text">怎么构建命令行工具</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E5%86%99Node%E6%8F%92%E4%BB%B6"><span class="toc-number">4.</span> <span class="toc-text">怎么写Node插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8"><span class="toc-number">5.</span> <span class="toc-text">怎么构建桌面应用</span></a></li></ol></div></div><main id="content-main" class="section"><div class="list-item"><h1 class="post-title"><a id="那些没什么卵用的前端技巧" class="article-link" href="">那些没什么卵用的前端技巧</a></h1><div class="post-meta"><time class="meta published">Apr 16, 2019</time></div><div class="article"><div class="post-excerpt markdown-body"><p>作为<strong>面向装逼编程</strong>的坚定的追随者，掌握几门工具，快速实现一些看起来高大上的功能，是不可或缺的优良品质。现我仅将一两门学（tou）来的手艺公布于此，以此感（hu）化（you）新教徒：</p><ol><li><p>怎么搭建博客（<code>hexo</code> + <code>github pages</code>篇）</p></li><li><p>怎么构建命令行工具（<code>npm</code>篇）</p></li><li><p>怎么写Node插件（ <code>c++</code>篇）</p></li><li><p>怎么构建桌面应用（<code>Electron</code>篇）</p></li></ol><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>本文属于抛砖引玉型文章，每一点均可深入探索，在此不展开；</p><p>本文的命令均基于Mac进行，Win下有差异，自行搜索解决；</p><p>假如遇到问题，给一些思路：</p><ul><li>保证网络顺畅可翻墙（或采用淘宝镜像）</li><li>Win下构建C++，<code>npm install windows-build-tools</code>（耗时几分钟到几个小时不等）</li><li>遇到权限问题，<code>sudo</code> + 命令 或<code>sudo chown -R ${whoami} ~/</code>（掀桌子行为）</li><li>请确保语法、路径、项目名正确</li></ul><h2 id="怎么搭建博客"><a href="#怎么搭建博客" class="headerlink" title="怎么搭建博客"></a>怎么搭建博客</h2><p><a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/index.html">HEXO</a>：快速、简洁且高效的博客框架</p><ul><li>执行命令</li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br><span class="line">hexo init blog</span><br><span class="line">cd blog</span><br><span class="line">npm install</span><br><span class="line">hexo server</span><br></pre></td></tr></table></figure><ul><li>github创建Repo</li><li>采用<code>hexo-deployer-git</code></li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><ul><li>修改<code>_config.yml</code></li></ul><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">[email protected]:wps-word-fe/blog.git</span> <span class="comment"># git repo地址</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">gh-pages</span></span><br></pre></td></tr></table></figure><ul><li>构建：<code>hexo d</code></li><li><code>github</code>会默认启用<code>github pages</code>：eg：<a target="_blank" rel="noopener" href="https://wps-word-fe.github.io/blog/">https://wps-word-fe.github.io/blog/</a></li><li>假如没有绑定到更域名，需要更改<code>root</code>路径：<code>/blog/</code>（特指repo的名称）</li></ul><h2 id="怎么构建命令行工具"><a href="#怎么构建命令行工具" class="headerlink" title="怎么构建命令行工具"></a>怎么构建命令行工具</h2><ul><li>创建项目</li></ul><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">mkdir cmd && cd cmd && npm init</span><br><span class="line">mkdir bin && cd bin && touch ./resume.js</span><br></pre></td></tr></table></figure><ul><li>使用<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/commander">commander</a></li></ul><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install commander --save</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// resume.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> program = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line"></span><br><span class="line">program.version(<span class="string">'0.0.1'</span>).description(<span class="string">'这是我的简历'</span>)</span><br><span class="line">.option(<span class="string">'-n, --nick'</span>, <span class="string">'我的名字'</span>)</span><br><span class="line">.option(<span class="string">'-a, --age'</span>, <span class="string">'我的年龄'</span>)</span><br><span class="line">.option(<span class="string">'-t, --total'</span>, <span class="string">'总览'</span>);</span><br><span class="line"></span><br><span class="line">program.parse(process.argv);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (program.nick) { <span class="built_in">console</span>.log(<span class="string">'乐乐'</span>);} </span><br><span class="line"><span class="keyword">if</span> (program.age) { <span class="built_in">console</span>.log(<span class="string">'25'</span>); }</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (program.total) { <span class="built_in">console</span>.log(</span><br><span class="line"><span class="string">`</span></span><br><span class="line"><span class="string">姓名：李健乐</span></span><br><span class="line"><span class="string">学校：山东大学 专业：软件工程</span></span><br><span class="line"><span class="string">职业：前端工程师 工作经验：三年</span></span><br><span class="line"><span class="string">特长：</span></span><br><span class="line"><span class="string"> 进能 搞不掂 我他妈今晚就不睡了</span></span><br><span class="line"><span class="string"> 退能 保进度 一板砖拍死测试再说</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line"> )</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>测试</li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">node ./bin/cmd.js --help</span><br><span class="line">node ./bin/cmd.js -n # 乐乐</span><br><span class="line">node ./bin/cmd.js -a # 25 </span><br></pre></td></tr></table></figure><ul><li>发布</li></ul><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="string">"name"</span>: <span class="string">"@edeity/resume"</span>,</span><br><span class="line"> <span class="string">"version"</span>: <span class="string">"0.0.1"</span>,</span><br><span class="line"> <span class="string">"description"</span>: <span class="string">"my resume cmd"</span>,</span><br><span class="line"> <span class="string">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line"> <span class="string">"bin"</span>: {</span><br><span class="line"> <span class="string">"resume"</span>: <span class="string">"bin/resume.js"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="string">"scripts"</span>: {</span><br><span class="line"> <span class="string">"test"</span>: <span class="string">"echo \"Error: no test specified\" && exit 1"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="string">"author"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="string">"license"</span>: <span class="string">"MIT"</span>,</span><br><span class="line"> <span class="string">"dependencies"</span>: {</span><br><span class="line"> <span class="string">"commander"</span>: <span class="string">"^2.20.0"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> npm config <span class="built_in">set</span> registry <span class="string">"https://registry.npmjs.org"</span></span></span><br><span class="line">npm login</span><br><span class="line">npm publish --access public</span><br><span class="line"><span class="meta">#</span><span class="bash"> npm unpublish --force</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> npm config <span class="built_in">set</span> registry <span class="string">"https://registry.npm.taobao.org"</span></span></span><br></pre></td></tr></table></figure><ul><li>测试</li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">sudo npm install @edeity/resume --global</span><br><span class="line">resume --help</span><br></pre></td></tr></table></figure><h2 id="怎么写Node插件"><a href="#怎么写Node插件" class="headerlink" title="怎么写Node插件"></a>怎么写Node插件</h2><ul><li>创建项目</li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">mkdir addons && cd addons && npm init</span><br></pre></td></tr></table></figure><ul><li><code>binding.gyp</code></li></ul><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="string">'targets'</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="string">'target_name'</span>: <span class="string">'addons'</span>,</span><br><span class="line"> <span class="string">'sources'</span>: [],</span><br><span class="line"> <span class="string">"include_dirs"</span> : [</span><br><span class="line"> <span class="string">"<!(node -e \"require('nan')\")"</span></span><br><span class="line"> ],</span><br><span class="line"> <span class="string">'conditions'</span>: [</span><br><span class="line"> [<span class="string">'OS == "mac"'</span>, {</span><br><span class="line"> <span class="string">'sources'</span>: [</span><br><span class="line"> <span class="string">'clipboard/cpb_mac.mm'</span>,</span><br><span class="line"> ],</span><br><span class="line"> <span class="string">'libraries'</span>: [</span><br><span class="line"> <span class="string">'-framework AppKit'</span>,</span><br><span class="line"> ]</span><br><span class="line"> }],</span><br><span class="line"> ],</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><ul><li>编写<code>C++代码</code></li></ul><figure class="highlight c++"><table><tr><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><nan.h></span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string"><AppKit/AppKit.h></span></span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Method</span><span class="params">(<span class="keyword">const</span> Nan::FunctionCallbackInfo<v8::Value>& info)</span> </span>{</span><br><span class="line"> v8::Local<v8::Array> fileArray = Nan::New<v8::Array>();</span><br><span class="line"></span><br><span class="line"> NSPasteboard *pboard = [NSPasteboard generalPasteboard];</span><br><span class="line"></span><br><span class="line"> <span class="comment">// TODO Objective-C++ 自动引用回收问题</span></span><br><span class="line"> <span class="comment">// TODO NSPasteboardTypeFileURL 只支持 10.13 以及以后的版本</span></span><br><span class="line"> NSString *fileURL = [pboard stringForType:NSPasteboardTypeFileURL];</span><br><span class="line"> NSString *fileName = [pboard stringForType:NSPasteboardTypeString];</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (fileURL != nil) {</span><br><span class="line"> <span class="keyword">const</span> <span class="keyword">char</span> *fileUtf8Name = [fileName UTF8String];</span><br><span class="line"> v8::Local<v8::<span class="keyword">String</span>> tempName = Nan::New<v8::<span class="keyword">String</span>>(fileUtf8Name).ToLocalChecked();</span><br><span class="line"> Nan::Set(fileArray, <span class="number">0</span>, tempName);</span><br><span class="line"> }</span><br><span class="line"> info.GetReturnValue().Set(fileArray);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Init</span><span class="params">(v8::Local<v8::Object> exports)</span> </span>{</span><br><span class="line"> exports->Set(Nan::New(<span class="string">"getClipboardFiles"</span>).ToLocalChecked(),</span><br><span class="line"> Nan::New<v8::FunctionTemplate>(Method)->GetFunction());</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">NODE_MODULE(clipboard, Init)</span><br></pre></td></tr></table></figure><ul><li>构建：<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/node-gyp">node-gyp</a>、<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/bindings">bindings</a></li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install node-gyp -g</span><br><span class="line">npm install bindings nan --save</span><br><span class="line">node-gyp configure</span><br><span class="line">node-gyp build</span><br></pre></td></tr></table></figure><ul><li>测试</li></ul><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> clipboard = <span class="built_in">require</span>(<span class="string">'bindings'</span>)(<span class="string">'addons'</span>);</span><br><span class="line"><span class="keyword">const</span> process = <span class="built_in">require</span>(<span class="string">'process'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(process.platform === <span class="string">'darwin'</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(clipboard.getClipboardData());</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="built_in">exports</span> = <span class="built_in">module</span>.exports = clipboard;</span><br></pre></td></tr></table></figure><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">node index.js # your copy data</span><br></pre></td></tr></table></figure><h2 id="怎么构建桌面应用"><a href="#怎么构建桌面应用" class="headerlink" title="怎么构建桌面应用"></a>怎么构建桌面应用</h2><ul><li>用<code>CRA</code>构建一个应用</li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npx create-react-app electron-app && cd electron-app && npm start</span><br></pre></td></tr></table></figure><ul><li>声明<code>electron</code>入口<code>main.js</code></li></ul><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line">{</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="string">"main"</span>: <span class="string">"./public/electron.js"</span>,</span><br><span class="line"> <span class="string">"homepage"</span>: <span class="string">"./"</span>,</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">const</span> { app, BrowserWindow, Menu } = <span class="built_in">require</span>(<span class="string">'electron'</span>)</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="keyword">const</span> url = <span class="built_in">require</span>(<span class="string">'url'</span>)</span><br><span class="line"><span class="keyword">const</span> IS_DEV = process.env.NODE_ENV === <span class="string">'development'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> mainWindow</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createWindow</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> menu = Menu.buildFromTemplate([])</span><br><span class="line"> Menu.setApplicationMenu(menu) <span class="comment">// 设置菜单部分</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// Create the browser window.</span></span><br><span class="line"> mainWindow = <span class="keyword">new</span> BrowserWindow({</span><br><span class="line"> width: <span class="number">600</span>,</span><br><span class="line"> height: <span class="number">400</span>,</span><br><span class="line"> title: <span class="string">'大哥大嫂过年好！'</span>,</span><br><span class="line"> resizable: <span class="literal">false</span>,</span><br><span class="line"> transparent: <span class="literal">true</span>,</span><br><span class="line"> frame: <span class="literal">false</span>,</span><br><span class="line"> titleBarStyle: <span class="string">'customButtonsOnHover'</span>,</span><br><span class="line"> <span class="comment">// titleBarStyle: 'hidden',</span></span><br><span class="line"> hasShadow: <span class="literal">false</span>,</span><br><span class="line"> alwaysOnTop: <span class="literal">true</span>,</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 加载应用</span></span><br><span class="line"> <span class="keyword">const</span> staticIndexPath = path.join(__dirname, <span class="string">'./build/index.html'</span>);</span><br><span class="line"> <span class="keyword">const</span> main = IS_DEV ? <span class="string">`http://localhost:3000`</span> : url.format({</span><br><span class="line"> pathname: staticIndexPath,</span><br><span class="line"> protocol: <span class="string">'file:'</span>,</span><br><span class="line"> slashes: <span class="literal">true</span></span><br><span class="line"> })</span><br><span class="line"> mainWindow.loadURL(main)</span><br><span class="line"></span><br><span class="line"> mainWindow.on(<span class="string">'closed'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> mainWindow = <span class="literal">null</span></span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">app.on(<span class="string">'ready'</span>, createWindow)</span><br><span class="line"></span><br><span class="line">app.on(<span class="string">'window-all-closed'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> app.quit()</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">app.on(<span class="string">'activate'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (mainWindow === <span class="literal">null</span>) {</span><br><span class="line"> createWindow()</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><ul><li>测试：</li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install electorn -g</span><br><span class="line">NODE_ENV=development electron .</span><br></pre></td></tr></table></figure><ul><li>构建</li></ul><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install electron-builder -g</span><br><span class="line">rm -rf ./build && rm -rf ./dist</span><br><span class="line">npm run build</span><br><span class="line">electron-builder</span><br></pre></td></tr></table></figure></div></div></div><div class="more section"><div class="pre"><a class="article-link" href="/optimize_docs.html"><i class="iconfont icon-right"></i> <span>WEB文字性能优化简述</span></a></div><div class="next"><a class="article-link" href="/css_of_index.html">css中的“层” <i class="iconfont icon-right"></i></a></div></div></main></body><footer class="section fullscreen"><div class="footer-desc">Edeink © 2015-2022 · Powered by Hexo</div></footer><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="/public/js/init.js"></script></html>