Vite 从入门到精通 | 静态资源处理

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Vite 从入门到精通 | 静态资源处理

如何在 Vite 中处理静态文件的请求, 图片, text,json等资源

图片资源

Vite 支持图片资源直接 import

// App.jsx
import { defineComponent } from "@vue/runtime-core";
import "@style/index.css"
import "@style/index.less"
import classes from '@style/test.module.css'
import {a} from './test'
// 直接引入 logo.png 并创建 img 标签使用
import logo from './assets/logo.png'

export default defineComponent({
    setup() {
        return () => {
            return <>
             <div class={`root  ${classes.moduleClass}`}>Hello  {a.name}</div> <img src={logo} alt="" />
            </>
        }
    }
})

Logo 正常显示出来了

types

Vite 提供了 import 参数去帮助我们以固定的方式引入文件

• url: 把文件放在某个地方托管, 返回URL
• raw: 直接返回文件的字符串内容
• worker / worker inline: 返回 webworker

import test from './test?url' // 加上?url 返回资源路径而不是文件了~
console.log(test) // => /src/test.ts 

import test from './test?raw'
console.log(test) // => 将文件代码以字符串的形式打印出来了
// import { A } from './types'
// import .meta.env;
// export const a: A = {
//     name: "jocker"
// }

测试 web worker

Vite 中使用 WebWorker 的方式

touch /src/worker.js

// /src/worker.js
var i = 0
function timedCount () {
    i= i + 1
    postMessage(i)
    setTimeout(timedCount, 500)
}
timedCount();

// main.js
import Worker from './worker?worker'
const worker = new Worker()
worker.onmessage = function (e) {
    console.log(e) // 打印接收到的内容
}

JSON资源

import { createApp } from 'vue'
import App from './App'
import pkg from "../package.json" // 使用 JSON
console.log(pkg);

createApp(App).mount('#app')

同时也支持 json 解构

import { createApp } from 'vue'
import App from './App'
import { version } from "../package.json"
console.log(version); // => 0.0.0

createApp(App).mount('#app')

Web Assembly

在浏览器中可运行的二进制内容

AssemblyScript : www.assemblyscript.org/

准备wasm 文件

• 步骤 1 创建assemb.ts

// assemb.ts
/** Calculates the n-th Fibonacci number. */
export function fib(n: i32): i32 {
  var a = 0, b = 1
  if (n > 0) {
    while (--n) {
      let t = a + b
      a = b
      b = t
    }
    return b
  }
  return a
}

• 步骤 2 通过 ./node_modules/.bin/asc 命令编译成 wasm 文件

   $  yarn add global assemblyscript
   $ ./node_modules/.bin/asc assemb.ts --binaryFile fib.wasm
   
   # 参考网站 https://www.assemblyscript.org/compiler.html#command-line-options
  

• 步骤 3 得到 fib.wasm 文件

• 步骤 4 main.js 使用 wasm

  // main.js
  import { createApp } from 'vue'
  import App from './App'
  
  import init from "./fib.wasm"
  
  // init 异步方法 返回 promise
  init().then(m => {
      console.log(m.fib(10))
  })
  
  createApp(App).mount('#app')
  
  

Web Assembly 执行成功