blog

blog copied to clipboard

babel配置指南

3

[原文地址](https://github.com/zyl1314/blog/issues/16) 相信很多人和笔者从前一样，babel的配置都是从网上复制黏贴或者使用现成的脚手架，虽然这能够工作但还是希望大家能够知其所以然，因此本文将对babel（babel@7）的配置做一次较为完整的梳理。 ## 语法和api es6增加的内容可以分为语法和api两部分，搞清楚这点很重要，新语法比如箭头函数、解构等： ```js const fn = () => {} const arr2 = [...arr1] ``` 新的api比如Map、Promise等： ```js const m = new Map() const p = new Promise(() =>...

zyl1314

# 从koa-session中间件学习cookie与session 关于cookie和session是什么网上有很多介绍，但是具体的用法自己事实上一直不是很清楚，通过koa-session中间件的源码自己也算是对cookie和session大致搞明白了。 在我了解cookie的时候，大多数教程讲的是这些： ```js function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" +...

zyl1314

zyl1314

## 注意 #### webview - 从一个页面跳转到另一个页面再返回时会引起页面的刷新，假如跳转到另一个页面是通过新打开一个webview完成的，那么返回时是不会导致页面刷新的。 - 小程序中同一个webview内是不会有返回按钮的，可以通过新打开一个webview解决

zyl1314

## tsconfig.json ```json { "compilerOptions": { "module": "esnext", "target": "es6", "lib": ["es6", "dom"], "jsx": "preserve", "moduleResolution": "node", "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "baseUrl": "src" } } ``` 这是目前的配置，说明下：这里仅希望ts去做一些类型检查方面的工作，不涉及到其他的工作，如转换为低版本的语言等。因此ts转换后的目标代码仍然是es6的，且保留jsx，这部分的工作统一交给babel去做。相应的tsx的loader需要再走一遍babel-loader： ```js { test:...

zyl1314

## Babel - #### forceAllTransforms preset-env的一个选项，默认是false，项目中一般配置为了true。看其字面意思可知是强制所有的转换，不再根据browserslist按需转换，原因是生产环境最终的产出需要走压缩，现阶段还不支持压缩es6的代码，因此强制转换所有的新语法。 ## webpack

zyl1314

# 从koa-static中间件学习搭建静态文件服务器 ## koa-send >Static file serving middleware koa-static中有说明它只是koa-send的一个包装 ```js const send = require('koa-send'); app.use(async (ctx) => { await send(ctx, ctx.path, { root: __dirname + '/public' }); }) ``` 查看koa-send的源码可以发现，它做的工作是根据传入的path查找文件是否存在，如果存在就创建一个流，不存在就抛出错误。...

zyl1314

# react漫谈 > react是什么？其官网给出了明确定义：`A JavaScript library for building user interfaces`，一个用于构建用户界面的JavaScript库。 ## 1. Thinking in React 通常情况下前端的界面可以用一个简单的公式来抽象： ```js view = fn(state) ``` 举个例子，现在有这么一个需求：根据一组信息渲染一个列表 ```js let infos = [ { name: 'zhangsan'...

zyl1314

[原文地址](https://github.com/zyl1314/blog/issues/14) ## 前言 笔者最近在做一些后台项目，使用的是[Ant Design Pro](https://github.com/ant-design/ant-design-pro)，其使用了[redux-saga](https://github.com/redux-saga/redux-saga)处理异步数据流，本文将对redux-saga的原理做一个简单的解读，并将实现一个[简易版的redux-saga](https://github.com/zyl1314/tiny-libs/tree/master/tiny-redux-saga)。 ## Generator函数的自动流程控制 在redux-saga中，saga是指一些长时操作，用generator函数表示。generator函数的强大之处在于其可以手动的暂停、恢复执行，且可以与函数体外进行数据交互，看如下例子： ```js function *gen() { const a = yield 'hello'; console.log(a); } cont g = gen(); g.next(); // { value: 'hello', done:...

zyl1314

# koa原理浅析 >选取的版本为koa2 koa的源码由四个文件组成 ```js application.js koa的骨架 context.js ctx的原型 request.js request的原型 response.js response的原型 ``` ## 基本用法 ```js const Koa = require('koa'); const app = new Koa(); app.use(async ctx => {...

zyl1314