另外一个是，基于eslint的兼容性检查插件，https://github.com/amilajack/eslint-plugin-compat ，推荐使用这个，可以配置各种浏览器、语法版本、很灵活

可以通过创建.env环境变量文件影响react-scripts start/build等命令。其实还有另一种更灵活的方式设置环境变量,使用export可以对不同的命令设置不同的环境变量.

打开package.json，找到scripts配置项

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

添加export GENERATE_SOURCEMAP=true/false修改为以下配置

  "scripts": {
    "start": "export GENERATE_SOURCEMAP=true && react-scripts start",
    "build": "export GENERATE_SOURCEMAP=false && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

这样，在运行start调试时，产生sourceMap方便调试；运行build命令时，关闭sourceMap减少产物文件大小。

ZLView

ZLView base react , super and sub , coordinate by x-y-width-height；基于react的视图，使用x-y-width-height坐标系

示例

使用多个div节点绘制正弦曲线

import React from 'react';
import * as zl from 'react-zlview'

class App extends React.Component
{
    private appView : zl.View | undefined;
    render()
    {
        if(this.appView === undefined)
        {
            this.appView = new zl.View();
            this.appView.x = 200;
            this.appView.y = 100;
            this.appView.width = 1000;
            this.appView.height = 50;
            this.appView.backgroudColor = "white";

            let colors = ["red","blue","gredd"];
            for (let i = 0 ; 999 > i ; i ++)
            {
                let sub = new zl.View();
                sub.x = i;
                sub.y = Math.sin(i / 3.14) * 15 + this.appView.height / 2;
                sub.width = 3;
                sub.height = 3;
                sub.backgroudColor = colors[i %3];
                this.appView.addSubview(sub);
            }
        }
        // 也可以直接返回 this.appView.reactElement();
        // return  this.appView.reactElement();
        return (
            

                

                    {this.appView.reactElement()}
                
            
        );
    }
}

ZLView的坐标系统

一个ZLView对应一个React Component，也可说是对React Component的封装；ZLView采用固定CSS样式，将position设置为absolute，然后设置left/right/widht/height。当然ZLView对此作了封装：

ZLView的尺寸单位

支持px和rem两种，默认使用px单位。
可以设置ZLCurrentSizeUnit值来改变尺寸单位。另外，px和rem的换算，默认使用1rem=16px，也可以修改ZLCurrentSizeUnitOneRemToPx来改变这个换算比例.

ZLView的生命周期

源自React Component的生命周期

父视图和子视图

• superView 获取父视图

• removeFromSuperview 从父图中移除

• subViews 获取子视图列表

• addSubview 添加子视图

  刷新视图

• refresh 刷新视图，本质是调用 React.setState。 ZLView的属性变更后，需要主动调用 refresh来刷新视图

• layoutSubViews,是一个通知类型的方法，用于重新布局子视图列表；触发时机是在React.render返回结果前

ZLView获取DOM节点

可以通过实现方法onReactRefCallback来获取，也可以调用addListenOnReactRefCallback添加新方法获取.

监听DOM事件

通过addListenDOMEvent和removeListenDOMEvent可以监听/移除监听DOM事件，例如

 view.addListenDOMEvent("onClick", (e:React.SyntheticEvent)=>{
     console.log("clicked");
 })

继承ZLView

ZLView支持继承以自定义视图样式，通常需要重写的方法__reactRender__和__htmlAttributes__，前者用于返回React.render数据，后缀用于修改CSS样式

示列:

class CustomView extends zl.View
{
    /**
     * 渲染  React render
     */
    protected __reactRender__(children?:React.ReactNode[]) : React.ReactElement
    {
        // html attributes
        let attr = this.__htmlAttributes__();
        return React.createElement("canvas"/*自定义标签*/, attr.toReactClassAttributes(),children);
    }

    /**
     * 子类可重写
     * @returns html attributes
     */
    protected __htmlAttributes__() : ZLHtmlAttribute
    {
        let attr = super.__htmlAttributes__();
        attr.style.backgroundColor = "white";//背景色永远是白色
        return attr
    }

Transform

封装了matrix2d和matrix3d变换ZLTransform，内部实现使用了矩阵乘法，支持translate 平动、scale 缩放、rotate 旋转、skew 倾斜、refect 翻转。

let view:zl.View = new zl.View();
view.width = 200;
view.height = 100;
view.backgroundColor = "yellow";

let transform = new zl.Transform();
transform.rotate(Math.PI);
transform.translate(10,190);
view.transform = transform;
view.refresh();

背景色、前景色、不透明度、是否可见

• backgroundColor 略
• color 略
• opacity 略
• visibility 略

设置阴影

简单封装了css box shadow，可以直接设置ZLView.boxShadow属性

view.backgroundColor = "yellow";

let shadow = new zl.BoxShadow();
shadow.color = "green";
view.boxShadow = shadow;

边框

支持简单设置

• borderColor 边框颜色
• borderStyle 边框样式
• borderWidth 边框宽度

动画

简单封装了CSS动画，直接作用在ZLView上

/**
 * 开启一个3秒动画
 * 尺寸从(100,200)变化到（200，100）
 * 背景色从red到yellow
 * 动画曲线使用cubic-bezier（1,0,0,1)
 */

let view = new zl.View()
view.width = 100;
view.height = 200;
view.backgroudColor = "red";

view.cssAnimation({to:()=>{
            view.backgroudColor = "yellow";
            view.x = 100;
            view.width = 200;
            view.height = 100;

            let transform = new zl.Transform();
            transform.rotate(Math.PI);
            transform.translate(10,190);
        },
            duration:3000,
            timingFunction:zl.CSSAnimationTimingFunction.cubicBezier,
            cubicBezierValue:[1,0,0,1],
            end:()=>{
                console.log("animation end");
            }
});

ZLRouter路由

封装react-router-dom。引入页面概念ZLViewPage，一个路由对应一个页面，采用严格模式匹配路由的path

class HomePage extends zl.ViewPage
{
    viewDidLoad()
    {
        super.viewDidLoad();
        this.view.backgroudColor = "red";
    }

    viewDidMount()
    {
        setTimeout(()=>{
            this.router?.push("/other");
        },5000);
        console.log( this.constructor.name + " mount");
    }

    viewWillUnmount()
    {
        console.log( this.constructor.name + " unmount");
    }
}

class OtherPage extends zl.ViewPage
{
    viewDidLoad()
    {
        super.viewDidLoad();
        this.view.backgroudColor = "blue";
    }

    viewDidMount()
    {
        console.log( this.constructor.name + " mount");
    }

    viewWillUnmount()
    {
        console.log( this.constructor.name + " unmount");
    }
}

class App extends React.Component
{
    private router: zl.Router | undefined;
    render()
    {
        if (this.router === undefined) {
            this.router = new zl.Router();
            this.router.registRoute("/",HomePage);
            this.router.registRoute("/other", OtherPage);
        }
        return this.router.reactElement();
    }
}

注册路由

let router = new zl.Router();
router.registRoute("/",HomePage);
router.registRoute("/other",OtherPage);

也可以直接注册ZLViewPage

// 等同于  router.registRoute("/OtherPage",OtherPage);
router.registViewPage(OtherPage);

路由跳转

router.push("/other");
router.replace("/");

也可以直接pushZLViewPage

// 等同于  router.push("/OtherPage");
router.pushViewPage(OtherPage);

npm init

通过npm init初始化项目来创建用户package.json文件
也可以npm init -y 这个是使用的默认的配置，我个人使用的是npm init

创建tsconfig.json文件

tsc --init

就会生成一个tsconfig.json文件

修改tsconfig.json默认文件
把这两个注释打开

{
  "compilerOptions": {
        "declaration": true, //打包之后是否生成声明文件
        "outDir": "./dist", //输出文件
    }
}

添加exclude,忽略dist文件
在打包的时候会排除这里面指定的路径文件

{
  "compilerOptions": {
    },
    "exclude": [
    "./dist"
  ]
}

安装typescript依赖

npm install typescript -D

开始编码

创建xxxxx.ts文件,写入typescript代码
例如

const arrayMap = (array: [], callback:(item: any,index: number, arr: any[]) => any): any => {
    let i = -1
    const len = array.length
    let resArray = []
    while (++i < len){
        resArray.push(callback(array[i],i,array))
    }
    return resArray
}
export = arrayMap

对代码进行编译

tsc

此时我们的项目就会多了一个dist目录

登录npm

大家没有npm账号的可以注册一个

这个是网址

https://www.npmjs.com
然后在编辑器终端里面输入

npm login

接着就会出来用户名、密码、邮箱这些依次填一下

创建.npmignore文件

在项目根目录里创建一个.npmjgnore

这个其实和.gitignor差不多，就是你发npm包的时候，希望哪些文件或者文件夹不发到这个npm上

版本号

在package.json里面版本号，
每发布一次都要修改一下

发布

npm publish

发布成功

原文https://segmentfault.com/a/1190000021740976

{
    "noEmit": false,
    "declaration": true,
    "declarationDir": "dist/declaration",
    "outDir": "dist"
}

• noEmit , 若要导出d.ts文件，必须为false。否则会忽略declaration相关参数
• declaration,是否导出d.ts文件，当为true时且noEmit为true时才会进行导出操作.
• declarationDir，d.ts文件存放的目录路径。当不设置改参数时，将使用outDir的值
• outDir，将typescript 转换成js文件、以及d.ts文件的存放目录

配置完成后，运行tsc --build tsconfig.json即可

打开本地目录或工作空间

命令ID vscode.openFolder ,打开一个目录或者工作空间。可以在当前窗口打开，或者新建窗口打开。
参数

• uri ，Uri类型，可选，目录（工作空间）路径。如果不提供，那么将会弹出一个原生的目录选择对话框
• newWindow，可选，是否打开一个新的窗口

// 在新窗口打开/some/path/to/folder
let uri = vscode.Uri.file("/some/path/to/folder");
vscode.commands.executeCommand("vscode.openFolder",uri,true);

当前活动的Terminal（Shell终端）

内置方法vscode.window.activeTerminal

创建Terminal（Shell终端）

使用内置方法vscode.window.createTerminal，它有三个重载函数, 返回值均为vscode.Terminal

• createTerminal(name?: string, shellPath?: string, shellArgs?: string[] | string): Terminal

shellArgs 详细格式参见https://msdn.microsoft.com/en-au/08dfcab2-eb6e-49a4-80eb-87d4076c98c6

• createTerminal(options: TerminalOptions): Terminal

TerminalOptions可用的值

• createTerminal(options: ExtensionTerminalOptions): Terminal
  此方法将创建一个由插件（扩展）控制输入输出的终端环境

ExtensionTerminalOptions可用的值

Pseudoterminal可用的值

Pseudoterminal 参见https://code.visualstudio.com/api/references/vscode-api#Pseudoterminal

参考
https://code.visualstudio.com/api/references/commands
https://code.visualstudio.com/api/references/vscode-api

创建工程

使用 yo code脚手架创建一个插件工程，语言选择TypeScript。具体过程略

配置侧边栏按钮(Tree View Container)和面板视图(Tree View)

侧边栏按钮(Tree View Container)和面板视图(Tree View)要同时配置，否则不生效。

打开package.json，添加以下内容

"contributes": {
        "viewsContainers": {
            "activitybar": [
                {
                    "id":"sidebar_test",
                    "title": "侧边栏测试",
                    "icon": "入口.svg"
                }
            ]
        },
        "views": {
            "sidebar_test":[
                {
                    "id":"sidebar_test_id1",
                    "name":"面板区块名称1"
                },
                {
                    "id":"sidebar_test_id2",
                    "name":"面板区块名称2"
                }
            ]
        }
    }

按钮图片格式，需要使用svg格式。views中key要和activitybar中的属性id保持一致，如sidebar_test在两者中是一致的。

以上配置了一个sidebar_test的侧边栏按钮，点击按钮，会出现面板区块名称1和面板区块名称2两个区块。

定义面板内容

以上仅仅是将面板入口添加上了，若添加内容与命令，则需要registerTreeDataProvider、TreeDataProvider、TreeItem用于内容管理，以及registerCommand注册命令

新建脚本test.ts,内容如下

import * as vscode from 'vscode';

// 树节点
export class EntryItem extends vscode.TreeItem
{
}

//树的内容组织管理
export class EntryList implements vscode.TreeDataProvider<EntryItem>
{
    onDidChangeTreeData?: vscode.Event<void | EntryItem | null | undefined> | undefined;
    getTreeItem(element: EntryItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
        return element;
    }
    getChildren(element?: EntryItem): vscode.ProviderResult<EntryItem[]> {
        if (element) {//子节点
            var childs = [];
            for (let index = 0; index < 3; index++) {
                let str = index.toString();
                var item = new EntryItem(str,vscode.TreeItemCollapsibleState.None);
                item.command = {command:"sidebar_test_id1.openChild", //命令id
                                title:"标题",
                                arguments:[str] //命令接收的参数
                                };
                childs[index] = item;
            }
            return childs;
        } else { //根节点
            return [new EntryItem("root",vscode.TreeItemCollapsibleState.Collapsed)];
        }
    }
}

然后在extension.ts中添加内容

import * as vscode from 'vscode';
import * as sidebar from './test';

/// 插件激活时
export function activate(context: vscode.ExtensionContext) {

    //注册侧边栏面板的实现
    const sidebar_test = new sidebar.EntryList();
    vscode.window.registerTreeDataProvider("sidebar_test_id1",sidebar_test);
    //注册命令 
    vscode.commands.registerCommand("sidebar_test_id1.openChild",args => {
        vscode.window.showInformationMessage(args);
    });

//// 其他内容保持不变
}

最后，在package.json，添加面板区块的展示事件，以驱动内容变化

"activationEvents": [
        "onView:sidebar_test_id1"
    ],
    "contributes": {
    }

运行结果如下

参考地址
https://code.visualstudio.com/docs/extensionAPI/vscode-api

一般的，sleep是将当前上下文所在的线程从执行状态转化为挂起状态，直到指定的一段实时时间过去后，再从挂起状态转化为执行状态，在sleep执行结束前，线程不会执行其他任务。

该函数使当前进程从执行状态转化为挂起状态，直到参数seconds所指定的一段实时时间过去后，或者是一个唤醒信号跟踪功能或终止进程功能的信号到来。该挂起时间由于系统的其他调度活动可能会比要求的时间长。

在ES标准中，JavaScript代码的执行环境是一个单线程环境，所以JavaScript如何实现sleep的本质是如何将一个线程阻塞一段时间然后继续工作。

这里的重点是阻塞。所以，使用promise、generator之类的实现是不满足这个需求的，任务调度机制本质不同，因为promise、generator的本质是延迟，而不是阻塞。

在不扩展JavaScript语言底层能力的情况下，实现阻塞方式：

• 计算阻塞
• IO阻塞

计算阻塞

也就是消耗CPU资源进行阻塞，通常是一段循环计算，在循环期间，JavaScript代码执行线程不会执行其他任务，从而达到模拟sleep的效果

<script type="text/javascript">

// bad implementation
function sleep(milliSeconds){
    var startTime = new Date().getTime(); // get the current time
    while (new Date().getTime() < startTime + milliSeconds); // hog cpu
    }
}
</script>

这种方式在任何标准的ES环境中都可以实现，阻塞和计时在同一个线程中完成。

IO阻塞

也就是消耗IO资源进行阻塞，通常是消耗网络IO，如XMLHttpRequest的同步通信。

<script type="text/javascript">

function sleep(milliSeconds)
{
  var resource;
  var response;
  if(typeof ActiveXObject == 'undefined'){
    resource = new XMLHttpRequest();
  }
  else{
    resource = new ActiveXObject("Microsoft.XMLHTTP");
  }
  try{
    resource.open('GET', 'sleep?milliSeconds=' + milliSeconds, false);
    resource.send(null);
    response = resource.responseText; // JavaScript waits for response
  }
  catch(e){
    alert(e);
  }
}
</script>

这种方式是基于BS模型，Server负责计时，在指定的时间后返回响应，Browser负责阻塞。

引入扩展阻塞

参考 http://devcheater.com/，还可以引入其他语言能力实现sleep，如Java Applet、Flash的sleep

对于Native WebView而言，Andoird/iOS都提供相应的方法/代理监听页面URL的变化。例如，Android可以重写doUpdateVisitedHistory方法监听URL变化，iOS可以实现shouldStartLoadWithRequest、decidePolicyForNavigationAction代理监听URL变化

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
  //此处检测url是否有变化
  return super.shouldOverrideUrlLoading(view, url);
}

//UIWebView
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    //此处检测url是否有变化
    return YES;
}

//WKWebView
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    //此处检测url是否有变化
    decisionHandler(WKNavigationActionPolicyAllow);
}

上述技术实现对一些前端应用能正常工作。然而，遇到单页应用（SPA）时，以上方法并不会被触发--这里涉及单页应用的实现原理，尤其是基于 hash路由的单页应用，其前进/后退的问题更为突出。

解决思路

对于前端应用而言，如果开发者使用固定的框架，那么在框架的路由层面拦截监听应较为容易做到。但是实际情况是开发者使用的前端框架不确定，甚至开发者连前端框架都不用，所以我们在前端框架层面截获路由器变得不那么容易。

经过调研，要监听前端页面的URL变化，大致有两种模式：

• 定时器模式
• 观察者模式

定时器模式

定期监测URL是否变化，如100毫秒监测一次，与上次监测值对比来判断URL是否变化。定时器，前端可以使用setInterval来实现

var oldUrl = window.location.href;
setInterval(function(){
  if (oldUrl !== window.location.href) {
    //通知Native Url变化
    oldUrl = window.location.href;
  }
},100);

当然，Native也可以开启定时器监测window.location.href。

定时器模式的特点是实现简单，适用范围广；缺点也显而易见，监测结果不是十分准确，性能耗用高。而其性能耗用问题在移动端将会放大，故此我们不采用此模式。

观察者模式

上面提到的doUpdateVisitedHistory、shouldStartLoadWithRequest、decidePolicyForNavigationAction的实现可以算作观察者模式。

前面提到，单页应用页面切换在移动端webview的行为表现，并不会每次都通知Native，我们要做的就是通过某种方法来完善这个页面切换的事件通知。

对于观察者模式，iOS中有KVO（key-value-observing）机制，遍历UIWebView和WKWebView的属性发现：

• WKWebView的URL属性能够响应KVO机制，当前端页面（包括单页应用的页面）URL有变化时，KVO机制可以监测到。
• UIWebView的request属性并不能响应KVO机制，不能用它检测URL变化。也就是说，单纯使用UIWebView的能力接口不能完全监测URL变化

至此，在Native侧建立观察者的思路并不适用所有情况，我们需要再返回前端侧研究下单页应用的URL变化。

单页应用，通过hash或window.history可以做到改变URL，使得不刷新页面的情况下重新渲染。我们只要监测hash和window.history，当它们发生变化时去检测URL的变化：

• 通过hash改变URL，会触发hashchange事件。当监听到hashchange事件时，去检测URL的变化。

• window.history相关的事件为popstate。当监听到popstate事件时，去检测URL的变化。

  History.back()、History.forward()、History.go()会触发popstate事件

• 另外，History.pushState()和History.replaceState()不会触发popstate事件，所以我们要hook这两个方法，以检测URL的变化。

方案实现

结合以上，最终我们可以采用的可行方案如下 :

注意：上述方案并不是唯一方案，但确实是一个可行方案

WKWebView监测URL部分实现

//添加观察者
[self addObserver:wkwebview forKeyPath:@"URL" options:NSKeyValueObservingOptionNew context:nil];

//接收观察事件
- (void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context
{
  //url变化，触发相应动作
}

//使用完毕后移除观察者
[self removeObserver:wkwebview forKeyPath:@"URL"];

前端监测URL部分实现

//监听hash变化
window.addEventListener('hashchange',function(event){
  //通过bridge通知Native URL变化
});

//监听history变化,popstate只能监听History.back(),History.forward()、History.go()
window.addEventListener('popstate',function(event){
  //通过bridge通知Native URL变化
});

//hook History.pushState()  History.replaceState()
var _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event('ffpd'+type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');

window.addEventListener('ffpdpushState',function(event){
  //通过bridge通知Native URL变化
});
window.addEventListener('ffpdreplaceState',function(event){
  //通过bridge通知Native URL变化
});

参考：https://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate

emcc   -s WASM=0  c/c++文件