10-vite 中处理静态资源的方法

vite 中处理静态资源的方法

1. 图片资源

// App.jsx`importsvgfrom'./assets/vue.svg'exportdefaultdefineComponent({setup(){return()=>{return<divclass={`root${test.moduleClass}`}>hello,write jsxinvue3{a.name}<img src={svg}alt=""/></div>}}})

2. types

• url

  importaaafrom'./test?url'// 这里的 ?url 是我们手动添加console.log(aaa,'aaa');// 打印出路径/src/test.ts aaa

• raw

  importbbbfrom'./test?raw'console.log(bbb,'bbb');// 这里将 test.ts 的文件内容以字符串的形式都打印出来

• worker/ work inline

  // work.tsvari=0functiontimedCount(){i=i+1postMessage(i)setTimeout(timedCount,500)}timedCount()// main.jsimportWorkerfrom'./work?worker'constworker=newWorker()worker.onmessage=function(e){console.log(e)}// 控制台日志main.js:10MessageEvent{isTrusted:true,data:13,origin:'',lastEventId:'',source:null,…}main.js:10MessageEvent{isTrusted:true,data:14,origin:'',lastEventId:'',source:null,…}main.js:10MessageEvent{isTrusted:true,data:15,origin:'',lastEventId:'',source:null,…}// 注意这里的 data，是从 worker.js 中传递过来的 i 的值

3. json

   import{version}from'../package.json'console.log(version,'version...');

4. web Assembly

• 什么是 web Assembly ?
  • 是一种可移植的二进制指令集格式，被设计为高性能的编译目标，能在现代浏览器、服务器及其他环境中高效、安全地执行。
    • Web高性能计算
    • 代码复用
    • 跨平台部署
• 具体使用
  • 从官网复制代码

    // assemb.tsexportfunctionfib(n:i32):i32{vara=0,b=1if(n>0){while(--n){lett=a+b a=b b=t}returnb}returna}

  • 执行命令 ./node_modules/.bin/asc assemb.ts -o fib.wasm

    // main.jsimportinitfrom'./fib.wasm?init'init().then(m=>{console.log(m.exports.fib(10));})

    • vite 辅助处理了关于 wasm 文件的注册，解析等工作