2019 年 08 月 - 11 文章

ElectronDemo

  |   0 评论   |   0 浏览

Electron js 写 windows/mac app 的框架 typescript react antd 创建项目 安装脚手架:yarn global add create-react-app 创建 react antd 项目:create-react-app my-project --scripts-version=react-scripts-ts-antd 以下是完整的 package.json { // 项目名称 "name": "typescript-sonar-client", // 版本 "version": "1.0.3-alpha", "description": "null", // 入口 "main": "main.js", // 作者 "author": "ferried <harlancui@outlook.com>", "license": "MIT", // 环境(开发/部署) "DEV": true, // 主页 "homepage": ".", // 脚本 "scripts": { // 启动 react "start": "reac....

Babel

  |   0 评论   |   0 浏览

Babel babel 是一个转化 js 语法的转译工具 为了浏览器兼容 基本包 // 1.core-内建包(代码引入) // 2.cli-command 包(命令执行) yarn add -D @babel/core @babel/cli @babel/preset-env // 3.垫片 yarn add @babel/polyfill 配置 demo // 建立 babel.config.js touch root/babel.config.js // 配置 echo "const presets = [ ["@babel/env", { targets: { edge: "17", firefox: "60", chrome: "67" safari: "11.1" }, useBuiltIns: "usage" }] ];" >> root/babel.config.js // 转译 ./node_modules/.bin/babel src --out-dir lib 插件 // 转译 function ()->{} function(){} yarn ad....

Nodejs

  |   0 评论   |   0 浏览

前言  适合有 js 基础的同学学习,概述 nodejs 的各方面应用 Hello World // 引用 http 模块 const http = require(" http"); // http 端口 const port = 8080; // 创建一个 Http 服务 const server = http.createServer((req, res) => { // response(响应) res.end(" Hello, world."); }); // 在端口监听服务 server.listen(port, () => { console.log(" Server listening on: localhost:% s", port); }); 基础 ... 模块 // 创建模块 const canadianDollar = 0. 91; function roundTwo( amount) { return Math.round( amount * 100) / 100; } // 导出模块 exports.canadianToUS = ca....

Typescript

  |   0 评论   |   0 浏览

介绍 typescript 是 JavaScript 的超集,最终也要编译成 javascript,有一定的编程基础再来看吧 编译器 安装 npm install -g tsc 配置 tsc 通过项目中的 tsconfig.json 来配置,先来看一个 demo { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "allowUnreachableCode": true, "allowUnusedLabels": true, "alwaysStrict": true, "baseUrl": "../asdf.ts", "charset": "utf-8", "checkJs": true, "declaration": true, "declarationDir": "../out", "diagnostics": true, "disableSizeLimit": true, "emitBOM": true, "emitDecoratorMetadata": true, "experimental....

Git

  |   0 评论   |   0 浏览

Git Git 会用一点, 这篇来深究一下原理 三种状态 已提交(committed):存在本地数据库中 已修改(modified):修改了还没存到数据库中 已暂存(staged):对一个已修改文件做了标记,包含在下次提交的快照中 三个工作区 仓库,工作目录,暂存区 本地仓库 初始化仓库:git init 追踪:git add 克隆线上:git clone http://... 检查状态:git status 检查状态(easy):git status --short 未暂存文件更新的部分:git diff 已暂存文件下次提交部分:git diff --staged 提交暂存到仓库:git commit 提交暂存到仓库并加入描述:git commit -m 'desc' 跳过暂存直接提交:git commit -a 移除文件:git rm part 移除暂存的文件:git rm -f part 移除但不删除:git rm --cached part 移动文件:git mv part part 历史记录:git log 历史记录差异:git log -p 2 历史记录简略统计:git ....

AngularCli

  |   0 评论   |   0 浏览

简介 写一份自定义的 angular 脚手架吧 写之前我们先解析一下 antd 的脚手架 前提 先把 Angular Schematic 这篇文章读一遍,确保了解了 collection 等基础 antd 脚手架 克隆项目 Git clone https://github.com/NG-ZORRO/ng-zorro-antd.git 开始 打开项目 在 schematics 下的 collection.json 为入口,查看内容 一共定了了 4 个 schematic,每个 schema 分别指向了各文件夹的子 schema.json,factory 指向了函数入口,index.ts ng-add/schema.json { // 指定 schema.json 的验证模式 "$schema": "http://json-schema.org/schema", "id": "nz-ng-add", "title": "Ant Design of Angular(NG-ZORRO) ng-add schematic", "type": "object", // 包含的属性 "properties": { "project": ....

vscode 插件开发经历

  |   0 评论   |   0 浏览

对 vscode 一无所知的前提下开发了聊天室插件 https://github.com/ferried/hacpai-cr 1.明确需求 首先,明确了自己的需求和开发步骤 1.必须登录得到 token 设置到 cookie 里 2.通过查看浏览器得到了 wss 的链接,并通过 D 大获取了必要的 ws 头信息 3.得出了需要让用户输入用户名密码,基于 nodejs 发送请求到 HacPai 换取 token 4.换取 token 存储到 vscode 中等待 wss 连接时使用 5.wss 设置头 User-Agent 等等等 6.wss 返回信息类型划分为 online 为获取当前在线用户 msg 为用户输入的信息 所以我需要 1.一个输入框(用户名密码发消息等) 2.一个消息列表(用来显示消息) 3.一个在线用户列表 通过官方的 GettingStart 一步步走下去了解到 1.输入框为 vscode.window.InputBox 2.vscode 原生列表(文件列表)为树格式需要自己写 provider 提供 data 最后找到一个官方项目集合示例 https://github.com/Microsoft/vscode-extension-sampl....

React

  |   0 评论   |   0 浏览

前言 相对于官方 demo,给出自己的理解, 秉承我一贯的作风,没有废话,直接讲代码,看注释,自己体会 React 基础 Cli npm install create-react-app 创建项目 create-react-app demo HelloWorld // HelloWorld 组件 // 返回一个标签 class HelloWorld extends Component { render() { return ( <div> <h1> Hello World</h1> </div> ); } } // 使用 HelloWorld 组件 class App extends Component { render() { return <HelloWorld> </HelloWorld>; } } JSX 表达式 // 重写 HelloWorld 组件 class HelloWorld extends Component { // 一个函数,接受 user 返回字符串 formatName(user) { retur....

Gradle

  |   0 评论   |   0 浏览

入门 代码打包编译工具 安装 # 安装 brew install gradle # 查看路径 brew info gradle gradle: stable 4.10.2 Open-source build automation tool based on the Groovy and Kotlin DSL https://www.gradle.org/ /usr/local/Cellar/gradle/4.10.2 (203 files, 83.7MB) * Built from source on 2018-09-30 at 21:09:13 From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/gradle.rb ==> Requirements Required: Java >= 1.7 ✔ ==> Options --with-all Installs Javadoc, examples, and source in addition to the binaries ==&gt....

Koa

  |   0 评论   |   0 浏览

KOA 是什么 后端框架(以 nodejs 作为运行时环境的 js 框架),处理 http 请求并响应的框架,注意,学完 KOA,一定要放弃 Express 学 koa 之前 要掌握 es7 知识,会查 nodejs 的 api,了解 http 是什么 入门 创建项目 mkdir stukoa cd stukoa # 初始化 node 项目 yarn init # 加入 koa 依赖 yarn add koa2 Hello world # 新建一个 js 文件 touch app.js 写入代码 const Koa = require('Koa') const app = new Koa() app.use(async(ctx)=>{ ctx.body = 'hello koa2' }) app.listen(8080) console.log('the server is running on 8080') 启动服务 node app.js 服务启动后查看 hello world 页面 ctx const Koa = require('Koa') const app = new Koa() app.use(async....

Angular6

  |   0 评论   |   0 浏览

入门 官方文档 高阶 修仙之路 构建第三方包 angular-cli 的 ng g lib 不太好用,所以还是用 ng-packgr 建立父项目 ng new project --style less --prefix pre 调整项目结构 cd project # 建立第三方包文件夹 mkdir -p projects/mylib # 在父项目中生成模块 ng g module mylib # 将 mylib.module.ts 移动到 project/mylib 下 mv mylib.module.ts ./projects/mylib # 在project/mylib 下生成 component/service # 注意,component 要 export 出来 cd project/mylib ng g c mycomponent ng g s myservice # 至此基本项目结构完成 模块依赖 当你编写第三方依赖包的时候,你的 service/component 或许需要一些数据来驱动,往往这些数据/对象是使用者提供的 # 建立 model 文件夹 mkdir -p project/my....