当前位置: 首页 > Web前端 > JavaScript

NativeJavascriptJSONModule

时间:2023-03-27 11:12:01 JavaScript

JSONModuleJSONModule已经被我们在开发中大量使用,导入json在开发中就像喝水一样常见。得益于构建工具的支持,我们可以随意导入任意json,并任意使用,但是js本身是不支持JSONModule的,这只是打包工具给我们的能力,webpack从2.0开始就直接支持JSONModule了。x,rollup还可以支持通过@rollup/plugin-json直接导入json模块,这些给我们带来了极大的方便,在此之前,我们需要在js文件中导出json。现在借助工具,我们可以直接导入json,导入的json会自动解析成对象供我们直接使用。Proposal根据tc39最新的ECMAScriptproposalJSONModules,js以后可以直接原生支持JSONModule。目前,该提案位于stage3阶段,预计很快将进入stage4阶段,从而进入标准。之后,我们就可以使用原生的JSONModule了。JSON模块提案基于导入断言提案。ImportAssertions提案规定了importmodule断言其类型时,也会支持WebAssembly类型语法JSONModules语法非常简单importjsonfrom"./data.json"assert{type:"json"};只需在导入后添加assert{type:"json"}对于动态导入,就是import("./data.json",{assert:{type:"json"}})目前没有浏览器支持这种语法,但是你可以使用babel插件@babel/plugin-syntax-import-assertions来支持这种语法//babel.config.jsmodule.exports={plugins:["@babel/plugin-syntax-import-assertions"]}如果你不想要手动配置环境,我也准备了一个样例工程,在这个工程中,可以直接使用JSONModules语法。项目地址参考这篇文章,参考JSONModules提案和ImportAssertions提案。有关更多提案信息,请参阅tc39的ECMAScript提案