Javascript 标签

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....

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....

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....