babel-plugin-label-switch

一个根据labeled statement 标记语句的标识符进行选择性输出的插件。

适用场景： ** 单文件/单项目书写多平台代码，针对特定平台，在保留该平台代码的同时移除其他平台代码。**

参数

• prefix：一个用于识别标识符前缀的正则表达式。为了防止作用到其他标识语句，必须使用特定前缀区分，默认的前缀是case$_*
  • type: RegExp
  • default: /^case\$_/
• map：一个标识符的映射表，用来决定哪些标记语句需要被移除。若某个标记语句的标识符存在该表里面，且其值为true，则保留标记语句的内容。否则整体移除
  • type: Object
  • default: {}

例子

• babel 配置:

{
	"plugins": [
		[
			"babel-plugin-label-switch",
			{
				"prefix": /^myPrefix_/,
				"map": {
					"isNode": false,
					"isBrowser": true,
					"isWxProgram": false
				}
			}
		]
	]
}

• 在 js 里面使用上述的标识符：

function request(method, url) {
	return new Promise((resolve, reject) => {
		myPrefix_isNode: {
			//node环境发起请求
			require('http')
				.request(
					url,
					{
						method
					},
					function() {
						resolve();
					}
				)
				.end();
		}

		myPrefix_isBrowser: {
			//浏览器环境发起请求
			var xhr = new XMLHttpRequest();
			xhr.open(method, url);
			xhr.onload = function() {
				resolve();
			};
			xhr.send();
		}

		myPrefix_isWxProgram: {
			//小程序环境发起请求
			wx.request({
				url,
				method,
				success: function() {
					resolve();
				}
			});
		}
	});
}

• 经过 babel 转换后:

function request(method, url) {
	return new Promise((resolve, reject) => {
		var xhr = new XMLHttpRequest();
		xhr.open(method, url);
		xhr.onload = function() {
			resolve();
		};
		xhr.send();
	});
}

注意事项

不要对插件作用的标识语句使用 break/continue

不管当前代码块是保留还是移除，其标识符总会被移除，实际上标识符与其标识语句并不存在于 js 的运行时中，在编译阶段会被移除。

//bad
case$_isNode: for (let i = 0; i < 9; i++) {
	loop: for (let j = 0; j < 9; j++) {
		if (i == 1 && j == 1) {
			continue case$_isNode;
		}
	}
}

//good
case$_isNode: {
	loop1: for (let i = 0; i < 9; i++) {
		loop2: for (let j = 0; j < 9; j++) {
			if (i == 1 && j == 1) {
				continue loop1;
			}
		}
	}
}

作用域问题

• 局部作用域变量 如果采用了形如label:{ statement }的标记语法，则需要注意一下作用域问题。代码经过插件转换后，会移除掉标记语法。若标记语法所标记内容存在let/const局部作用域变量，则需要谨慎检查这些变量是否与其他变量同名。

  const a = 10;
  case$_isNode: {
  	let a = 20;
  	console.log(a);
  }
      
  // ===>转换后：
  const a = 10;
  let a = 20; //<====Error!!!!
  console.log(a);

• import 问题 js 语法规定，import必须在最外层的作用域里面执行，如果需要动态选择引入的文件，请使用require

• export 问题 js 语法规定，export必须在最外层的作用域里面执行，因此，需要一些小小的技巧来规避这个问题

  export default (function() {
  	case$_isNode: {
  		let a = 20;
  		return a;
  	}
  	case$_isBrowser: {
  		let a = 20;
  		return a;
  	}
  })();

在 typescript 中使用

在 ts 中的使用与 js 类型，需要注意的是，ts 的引入与 js 有些许不同：

import * as React from 'react';
import * as TReactDOM from 'react-dom';
import * as TReactDOMServer from 'react-dom/server/';
import App from './app';
export default (function(){
	case$_isBrowser:{
		const ReactDOM:typeof TReactDOM=require('react-dom');
		ReactDOM.render(<App/>,document.getElementById("app"));
	}
	
	case$_isNode:{
		const ReactDOMServer:typeof TReactDOMServer=require('react-dom/server/');
		const str = ReactDOMServer.renderToString(<App/>);
		return str
	}
})();

在上述代码中，TReactDOM 和 TReactDOMServer分别来自@types/react-dom和@types/react-dom/server/，仅仅是引入typescript的类型文件。真正的引入来自于require语句，这样既保留了ts的类型，也实现了动态引入。