|
契机最近在搭建一个开源的项目环境时,我需要打一个 ES 模块的包,以便开发者可以直接通过npm 就能安装并使用,但是这个项目注定了会有样式,而且我希望打出的包的文件目录和我开发目录是一致的,似乎Rollup 是一个不错的选择,但是我(自虐般地)选择了Typescript 自带的编译器tsc,然后我就开始我的填坑之旅~tsc 遇到的坑在使用tsc 编译我的代码时,对我目前来说,有三个基本的坑,下面我会对它们进行简单的阐述,在此之前看下即将被编译的目录结构。|--src|--assets|--test.png|--util|--classnames.ts|--index.tsx|--index.scss简化引用路径问题首先我是在tsconfig.json 中写了简化引用路径配置的,比如针对以上目录,我是这样:{"compilerOptions":{"baseUrl":"./","paths":{"@Src/*":["src/*"],"@Utils/*":["src/utils/*"],"@Assets/*":["src/assets/*"]}}}那么无论我层级多深时,我要是想引用util 或assets 里面的文件模块、资源就会特别方便,比如我在index.tsx 文件中这样引入:编译前:importclassNamesfrom"@Utils/classnames";importtestPNGfrom"@Assets/test.png";编译后(预期 ):importclassNamesfrom"./util/classnames";importtestPNGfrom"./assets/test.png";然而实际编译后的结果令我大失所望,tsc 既然连这个都不支持转译!!它编译之后的代码还是老样子,于是我就去找官网查,发现也没有这个相关的配置项,于是跑到外网查了下发现有人是和我遇到了相同的问题的,它提供了一个解决方案就是,使用这个插件tscpaths[1]并在编译后多加一段npm 命令即可:"scripts":{"build":"tsc-ptsconfig.json&tscpaths-ptsconfig.json-ssrc-odist,},当执行到这个命令时:tscpaths-ptsconfig.json-ssrc-odist这个插件会去遍历每一个我们已经由tsc 编译之后的.js 文件,将我们简化的引用路径转为相对路径,大功告成~静态资源未打包问题如上所示,如果我在index.tsx 文件中引入一个放在assets 的图片资源:importtestPNGfrom"@Assets/test.png";在经过tsc 编译之后,而且在使用我们的命令行工具之后,我们的引用路径是对了,但是一看打包出来的目录中,是不会出现assets 这个资源文件夹的,其实这也正常,毕竟tsc 也仅仅是个 Typescript 的编译器,要实现其它的打包功能,要靠自己动手!解决问题的办法就是使用copyfiles[2]命令行工具,它和上面我们介绍的插件一样,都是在tsc 编译之后,做一些额外操作达到我们想要的目的。就像它的名字一样,它就是拿来复制文件的~我们在 npm scripts 下的 build 命令后面再加上这个:copyfiles-fsrc/assets/*dist/assets这样就能把资源文件夹复制到打包之后的文件目录下了。引入样式文件后缀名问题我们做一个项目时在所难免会用到sass 或less,本项目就选择了sass,我在index.tsx 中引入样式文件方式如下:import"./index.scss";但是在tsc 编译为.js 文件之后,打开index.js 发现引入的样式后缀还是.scss。作为给别的开发者使用的包,一定是要引入.css 文件的格式的,你不可能确定别人用的都是sass,所以我又去网上找解决方案,发现很少有人提这个问题,而且也没有找到可以用的插件什么的。就在一筹莫展之时,我突然想到,卧槽,这不就是类似于上面提到的tscpaths 这个工具吗,也是在文件内做字符串替换,太像了!于是我赶紧下载了它的源码,看了下大概是使用 node 读取了tsconfig.json 中bathUrl 和paths 配置,以及用户自定义的入口、出口路径来找到.js 文件,分析成相对路径之后再正则匹配到对应的引用路径去替换掉!立马有了思路准备实践,突然想到全局正则匹配做替换的局限性,比如在开发者代码中也写了与引用一样的代码(这种情况基本不可能发生,但是仍要考虑),那不是把人家的逻辑代码都改了吗?比如以下代码:importReactfrom"react";import"./index.scss";constTool=()=>{return(
Youshouldimportstylefilelikethis:
import'./index.scss');};怎么办,你做全局替换,是会替换掉别人逻辑源代码的。。当然,可以写更好的查找算法(或正则)来精确替换,但是无形中考虑的情况就非常多了;我们有没有更好的实现方式呢?这时候我想到了抽象语法树(AST)。注意 :另外要说一下,tsc 也不会编译.scss 文件的,它需要node-sass 来将每个.scss 文件编译到对应打包目录,在tsc 编译之后,再执行以下命令即可:"build-css":"node-sass-rsrc-odist",AST 是什么?如果你了解或者使用过ESLint、Babel 及Webpack 这类工具,那么恭喜你,你已经对 AST 的强大之处有了最直观的了解了,比如ESLint 是怎么修复你的代码的呢?看下面不太严谨的图:不严谨的语言描述就是,eslint 将当前的 js 代码解析成了一个抽象语法树,在这棵树上做了一些修整,比如剪掉一条树枝,就是去除代码中多出的空格space;比如修整了一条树枝,就是var 转换为const 等。修整完之后再转换为我们的 js 代码!这个树中的每条“枝”都代表了 js 代码中的某个字段的描述对象,比如以下简单的代码:consta=1;我们先自己定制一套简单的转换为 AST 语法规则,可以这样表示上面这行代码:{"type":"VariableDeclaration","kind":"const","declarations":[{"type":"VariableDeclarator","id":{"type":"Identifier","name":"a"},"init":{"type":"Literal","value":1,"raw":"1"}}]}是的,这就是一颗简易的抽象语法树了,就这么简单,它只是一种特殊的对象结构来表示我们的 js 代码而已,如果我们有一个手段,能拿到表示1 这个值的节点,并将init.value 改为2,再将该语法树转换为 js 源码,那就能得到:consta=2;那么上面说的“转换”规则是不用我们自己去写的,随着 JavaScript 语言的发展,由一些大佬创建的项目ESTree[3]用于更新 AST 规则,目前已成为社区标准。然后社区中一些其它项目比如 ESlint 和 Babel 就会使用 ESTree 或在此基础上做一些修改,然后衍生出自己的一套规则,并制作相应的转换工具,暴露出一些 API 给开发者使用。搭配工具因为生成的 AST 结构上看起来是特别繁杂的,如果没有好用工具或文档,学习时或写代码时会很困扰,那么接下来就给大家介绍三个利器。在线调试工具 AST Explorer这是一个非常棒的网站,只需要将你现在的 js 代码输入进去,即可查看转换后的 AST 结构。有了这个网站你就能实时地去查看解析之后的 AST 是什么样子的,以及它们的类型是什么,这在之后写代码去对 AST 做修改特别有用!因为你可以明确自己想要修改的地方是哪里。比如上图中,我们想要修改1为2,我们通过某个工具去找到这个 AST 中的type 为Literal 这个节点,将其value 设为2,再转换为 js 代码就实现了这个需求。类似的工具是很多的,我们就选用 Facebook 官方的开源工具:jscodeshift[4]AST 转换工具 jscodeshiftjscodeshift 是基于recast[5]封装的一个库,相比于 recast 不友好的 api 设计,jscodeshift 将其封装并暴露出对 js 开发者来说更为友好的 api,让我们在操作修改 AST 的时候更加方便。我建议大家先知道这个工具就行,具体的 api 使用我下面会跟大家挑几个典型的说一说,有个具体的印象就行,说实话,这个库的文档写的并不好,也不适合初学者阅读,特别是英语还不好的人。当你使用过它的一些 api 后有了直观的感觉,再去阅读也不迟~AST 类型大全 @babel/types这是一本 AST 类型词典,如果我们想要生成一些新的代码,也就是要生成一些新的节点,按照语法规则,你必须将你要添加的节点类型按照规范传入,比如const 的类型就为type: VariableDeclaration,当然了,type 只是一个节点的一个属性而已,还有其他的,你都可以在这里面查阅到。下面是常用的节点类型含义对照表,更多的类型大家可以细看@babel/types[6]:类型名称中文译名描述Program程序主体整段代码的主体VariableDeclaration变量声明声明变量,比如 let const varFunctionDeclaration函数声明声明函数,比如 functionExpressionStatement表达式语句通常为调用一个函数,比如 console.log(1)BlockStatement块语句包裹在 {} 内的语句,比如 if (true) { console.log(1) }BreakStatement中断语句通常指 breakContinueStatement持续语句通常指 continueReturnStatement返回语句通常指 returnSwitchStatementSwitch 语句通常指 switchIfStatementIf 控制流语句通常指 if (true) {} else {}Identifier标识符标识,比如声明变量语句中 const a = 1 中的 aArrayExpression数组表达式通常指一个数组,比如 [1, 2, 3]StringLiteral字符型字面量通常指字符串类型的字面量,比如 const a = '1' 中的 '1'NumericLiteral数字型字面量通常指数字类型的字面量,比如 const a = 1 中的 1ImportDeclaration引入声明声明引入,比如 importAST 节点的增删改查上面说到了 jscodeshift 的 api 设计的是比较友好的,那么我们就以一个树的增删改查来简单地带大家了解一下,不过在这之前需要先搭建一个简单的开发环境。开发环境第一步:创建一个项目文件夹mkdirast-democdast-demo第二步:项目初始化npminit-y第三步:安装 jscodeshiftnpminstalljscodeshift--save第四步:新建4 个 js 文件,分别对应增删该查。touchcreate.jsdelete.jsupdate.jsfind.js第五步:在做以下事例时,请大家打开AST Explorer[7],把要转换的value 都复制进来看看它的树结构,以便更好地理解。查找节点find.js:constjf=require("jscodeshift");constvalue=`importReactfrom'react';import{Button}from'antd';`;constroot=jf(value);root.find(jf.ImportDeclaration,{source:{value:"antd"}}).forEach((path)=>{console.log(path.node.source.value);});在控制台执行以下命令:nodefind.js然后你就能看到控制台打印了antd。在此说明一下,上面代码中定义的value 字符串就是我们要操作的文本内容,实际应用中我们一般都是读取文件,然后做处理。在上面的.find 函数中,第一个参数为要查找的类型,第二个参数为查询条件,如果你将上面的value 复制到AST Explorer[8]上看看,你就知道这个查询条件为什么是这种结构了。修改节点update.js:constjf=require("jscodeshift");constvalue=`importReactfrom'react';import{Button,Input}from'antd';`;constroot=jf(value);root.find(jf.ImportDeclaration,{source:{value:"antd"}}).forEach((path)=>{const{specifiers}=path.node;specifiers.forEach((spec)=>{if(spec.imported.name==="Button"){spec.imported.name="Select";}});});console.log(root.toSource());上面的代码目的是将从antd 引入的Button 改为Input,为了很精确地定位在这一行,我们先通过ImportDeclaration 和条件参数去找到,在向内找到Button 这个节点,简单的判断之后就可以做修改了。你能看到最后一行我们执行了toSource(),该方法就是将AST 转回为我们的源码,控制台打印如下:importReactfrom"react";import{Select,Input}from"antd";//可以看到Button已被精确地替换为了Select增加节点create.js:constjf=require("jscodeshift");constvalue=`importReactfrom'react';import{Button,Input}from'antd';`;constroot=jf(value);root.find(jf.ImportDeclaration,{source:{value:"antd"}}).forEach((path)=>{const{specifiers}=path.node;specifiers.push(jf.importSpecifier(jf.identifier("Select")));});console.log(root.toSource());上面代码首先仍然是找到antd 那行,然后在specifiers 这个数组的最后一位添加一个新的节点,表现在转换后的 js 代码上就是,新增了一个Select 的引入:importReactfrom"react";import{Button,Input,Select}from"antd";//可以看到引入了Select删除节点delete.js:constjf=require("jscodeshift");constvalue=`importReactfrom'react';import{Button,Input}from'antd';`;constroot=jf(value);root.find(jf.ImportDeclaration,{source:{value:"antd"}}).forEach((path)=>{jf(path).replaceWith("");});console.log(root.toSource());删除引入antd 一整行,就是这么简单。更多 API上面所实现的增删改查其实都是多种实现方式中的一种而已,只要你对 API 很熟练,或者脑洞够大,那可就谁也拦不住了~这里我只想说,去官方的collection[9]及extensions[10]看看你就知道有哪些 API 了,然后多尝试、多动手,总会实现你想要的效果的。实战解析技术为需求服务。明确需求在对 jscodeshift 有了初步了解之后,我们接下来做一个命令行工具来解决我在上面提出的“引入样式文件后缀名问题”,接下来会简单使用到commander[11],它使 nodejs 命令行接口变得更简单~我再次明确下我目前的需求:**由tsc 编译之后的目录,比如dist,我要将里面生成的所有 js 文件中关于样式文件的引入,比如import './style.scss',全部转换成以.css 为后缀的方式。**该命令行工具我给它命名为:tsccss。搭建环境就像上面一样,我们先初始化项目,因为演示为主,所以我们就不使用 Typescript 了,就写原生 nodejs 原生模块写法,如果对项目要求较高的,也可以加上ESLint、Prettier 等规范代码的工具,如果大家有兴趣,可以前往我在 github 上已经写好了的这个命令行工具tsccss[12],可以做个参考。好的,现在我们一气呵成,按下面步骤来:#创建项目目录mkdirtsccsscdtsccss#初始化npminit-y#安装依赖包npmicommanderglobbyjscodeshift--save#创建入口文件mkdirsrccdsrctouchindex.js现在目录如下:|--node_modules|--src|--index.js|--package.json接下来在package.json 中找个位置加入以下代码:{"main":"src/index.js","bin":{"tsccss":"src/index.js"},"files":["src"]}其中bin 字段很重要,在其他开发者下载了你这个包之后,人家在tsccss xxxxxx 时就会以 node 执行后面配置的文件,即src/index.js,当然,我们的index.js 还要在最顶部加上这行代码:#!/usr/bin/envnode这句代码解决了不同的用户 node 路径不同的问题,可以让系统动态的去查找 node 来执行你的脚本文件。使用 commander直接在index.js 中加入以下代码:const{program}=require("commander");program.version("0.0.1").option("-o,--out
","outputrootpath");program.on("--help",()=>{console.log(`Youcanaddthefollowingcommandstonpmscripts:------------------------------------------------------"compile":"tsccss-odist"------------------------------------------------------`);});program.parse(process.argv);const{out}=program.opts();console.log(out);if(!out){thrownewError("--outmustbespecified");}接下来在项目根目录下,执行以下控制台命令:nodesrc/index.js-odist你会发现控制台打印了dist,是的,就是-o dist 的作用,简单介绍下version 和option。version作用:定义命令程序的版本号;用法示例:.version('0.0.1', '-v, --version') ;参数解析:第一个参数,版本号 ;第二个参数,自定义标志 ,默认为 -V 和 --version。option作用:用于定义命令选项;用法示例:.option('-n, --name ', 'edit your name', 'vortesnail');参数解析:第一个参数,自定义标志 ,分为长短标识,中间用逗号、竖线或者空格分割;(标志后面可跟参数,可以用 或者 [] 修饰,前者意为必须参数,后者意为可选参数)第二个参数,选项描述 ,在使用 --help 命令时显示标志描述;第三个参数,选项参数默认值,可选。所以大家还可以试试这两个命令:nodesrc/index.js--versionnodesrc/index.js--help读取 dist 下 js 文件dist 目录是假定我们要去做样式文件后缀名替换的文件根目录,现在需要使用globby 工具自动读取该目录下的所有 js 文件路径,在顶部需要引入两个函数:const{resolve}=require("path");const{sync}=require("globby");然后在下面继续追加代码:constoutRoot=resolve(process.cwd(),out);console.log(`tsccss--out${outRoot}`);//Readoutputfilesconstfiles=sync(`${outRoot}/**/!(*.d).{ts,tsx,js,jsx}`,{dot:true,}).map((x)=>resolve(x));console.log(files);files 即dist 目录下所有 js 文件路径,我们故意在该目录下新建几个任意的 js 文件,再执行下node src/index.js -o dist,看看控制台是不是正确打印出了这些文件的绝对路径。编写替换方法因为有了前面的增删改查的铺垫,其实现在这一步已经很简单了,思路就是:找到所有类型为ImportDeclaration 的节点;运用正则判断该节点的source.value 是否以.scss 或.less 结尾;若正则匹配到了,我们就运用正则的一些用法将其后缀替换为.css。就这么简单,我们直接引入 jscodeshift :constjscodeshift=require("jscodeshift");然后追加以下代码:functiontransToCSS(str){constjf=jscodeshift;constroot=jf(str);root.find(jf.ImportDeclaration).forEach((path)=>{letvalue="";if(path&path.node&path.node.source){value=path.node.source.value;}constregex=/(scss|less)('|"|`)$/i;if(value®ex.test(value.toString())){path.node.source.value=value.toString().replace(regex,(_res,_$1,$2)=>($2`css${$2}`:"css"));}});returnroot.toSource();}可以看到,该方法直接返回了转换后的 js 代码,是可以直接写入源文件的内容。读写文件拿到文件路径files 后,需要 node 原生模块fs 来帮助我们读写文件,这部分代码很简单,思路就是:读 js 文件,将文件内容转换为 AST 做节点值替换,再转为 js 代码,最后写回该文件,就 OK 了。const{readFileSync,writeFileSync}=require("fs");//...constfilesLen=files.length;for(leti=0;i
|
|