最近在忙一个新的项目,因为项目工期要求很短、并且我对这个项目十分不想投入过多的精力,所以选择使用Electron.JS框架进行开发。
但是Electron默认是不支持ESM语法的,这就使得如果想在项目中引入Tabulator等依赖项目时,会遇到语法不兼容问题。
一、网上看到的介绍是错误的:
与网上说的在package.json中增加type: module不同,不需要在package.json中增加type声明。因为package.json中增加声明,似乎是告知electron框架,主进程使用ESM语法。但是实际上主进程、也就是main.js文件仍然是CommonJS语法的,无需支持ESM语法。
二、实际只需要在渲染层引入ESM语法的支持:
也就是在需要的html文件中,将引入script文件的地方进行调整,从:
<script src=”a.js”></script>
改成:
<script type=”module” src=”a.mjs”></script>
这样渲染层的js解析器、也就是chromium浏览器的V8引擎就知道引入的js脚本是支持ESM的,并且启用ESM语法支持了。
三、在a.mjs文件中:
此时在a.mjs文件中,不必再使用require引入包,可以使用import引入包了。
但是因为Tabulator并没有默认的default导出入口(我也不知道具体应该怎么更准确的描述)、同时不清楚为什么不能直接按照包名直接导入(虽然我也是NPM安装的),所以导入包的具体语句如下:
import {TabulatorFull as Tabulator} from ‘./node_modules/tabulator-tables/dist/js/tabulator_esm.min.js’;
剩下的具体使用就和其他正常使用没有差别了。
四、打包:
比较担心这样“自己胡乱导入”的包,最终打包生成可执行资源包的时候是否会出问题,经过实际npm run make打包,发现一切正常,可以正常使用。
做这个笔记,是因为导入的tabulator还要在很多前端页面中使用,并且接下来可能还要用到axios也要做类似的引入,所以备忘一下。