import语法仅声明模块依赖并触发加载，不处理原始字节或执行转译；按需转译由构建工具（如Vite/esbuild）或开发服务器在加载时完成，而非import本身。
import 语法本身不直接处理原始字节数据，也不能执行转译（transpilation）。它只是 ES 模块系统中用于声明依赖和加载 JavaScript 模块的静态或动态机制。所谓“模块化按需转译”，实际是构建流程与运行时加载协同的结果，import 只承担其中“触发加载”和“隔离作用域”的角色。
核心逻辑：import 是入口，不是转译器
原始字节数据（如一段未编译的 TypeScript、JSX 或带装饰器的类）不能被浏览器原生执行，必须先经 Babel、SWC 或 esbuild 等工具转译为标准 JS。import 语句只是告诉打包器或运行时：“这里需要这个模块”，后续的转译发生在构建阶段（如 Vite、Webpack 构建时）或开发服务器响应阶段（如 Vite 的按需编译服务），而非 import 执行时。
- 静态 import（import { fn } from './utils.ts'）：要求路径为字符串字面量，打包器在构建期识别并提前转译整个模块，生成可执行 JS
- 动态 import（import('./chart.ts')）：返回 Promise，常用于代码分割；Vite 等现代工具会在请求时即时读取、转译、缓存并返回已编译模块
- 浏览器原生支持的 import 只接受合法 JS（或通过 import maps 映射到已转译资源），不接受 .ts/.jsx 原始文件
真正实现“按需转译”的关键环节
要达成对原始字节（如 .ts、.tsx）的按需处理，需依赖开发服务器能力，而非 import 语法本身：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
-
Vite 开发服务器：收到
import('./foo.ts')请求后，内部调用 esbuild 即时转译为 JS，返回给浏览器，无需预构建 -
Import maps + 构建时预转译：将
import 'lodash'映射到已打包好的 CDN 地址（如https://cdn.skypack.dev/lodash@4.17.21），该地址背后已是 Skypack 自动转译后的 ESM 版本 - 自定义插件（如 Rollup/Vite 插件）：拦截 .wasm、.glsl 或自定义文本模块，通过插件读取原始字节，做定制解析或转译，再以 JS 对象形式导出——此时 import 加载的是插件输出的 JS 模块，非原始字节
不能跳过的前提条件
想让 import 触发对非 JS 原始文件的处理，必须满足以下至少一项：
- 开发环境使用支持源码直读的工具链（如 Vite、Snowpack），它们内置了对 TS/JSX/SFC 的即时转译管道
- 生产环境已由构建工具完成全量转译，并输出标准 JS 模块；import 加载的是产物，不是源码
- 通过自定义 MIME 类型或 data URL 方式绕过默认解析（极少见且不推荐），例如：
import raw from 'data:text/javascript,export default "hello";';—— 这属于内联字符串注入，不是对原始字节的通用转译方案
典型错误认知澄清
有人误以为写 import('./data.bin') 就能自动把二进制文件转成 ArrayBuffer 并处理，其实：
- 浏览器不支持直接 import 二进制文件（.bin/.png/.wasm 除外，且需对应 loader）
- 若需加载原始字节，应使用
fetch('./data.bin').then(r => r.arrayBuffer())，再交由 WebAssembly.instantiate 或自定义解析逻辑处理 - 若坚持用 import，需借助构建插件（如 vite-plugin-wasm、vite-plugin-raw）将二进制转为 Base64 字符串或 Uint8Array 常量模块，此时 import 加载的是“转译后”的 JS 表示，不是原始字节流本身
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
