javascript模块打包工具怎样使用？【教程】

林译川

2026-11-10 • 👁 0人浏览过

JavaScript模块打包工具需按项目类型、环境和依赖选择：Webpack需手动配置loader和resolve；Vite开发用ES模块、构建用Rollup；Esbuild极快但无HMR和代码分割，适合转译和工具链。 JavaScript 模块打包工具不是“选一个装上就能用”，关键看你的项目类型、目标环境和依赖结构——现代项目基本绕不开

webpack

、

vite

或

esbuild

，但它们的启动方式和配置重心完全不同。 Webpack 需要显式配置入口和 loader 才能处理 ES 模块它默认不识别

import

export

，也不处理

.jsx

或

.ts

。你得手动加

module.rules

：

babel-loader

转译新语法（比如可选链、top-level await）

ts-loader

或

swc-loader

处理 TypeScript 类型擦除若用 CSS 模块，必须配

css-loader

style-loader

，否则

import './index.css'

会报错常见错误：

ERROR in ./src/index.js 1:0-26 Module not found: Error: Can't resolve './utils'

——多半是

resolve.extensions

没配

'.js'

或

'.ts'

，导致

import utils from './utils'

找不到

utils.ts

。 Vite 开箱即用但只在开发时生效，构建仍走 esbuild + rollup 它用原生 ES 模块跑 dev server，所以

import.meta.env

、

import.meta.glob

这类特性直接可用；但执行

vite build

时，实际调用的是

rollup

（可通过

build.rollupOptions

调整），不是 Vite 自己打包。立即学习 “ Java免费学习笔记（深入） ”； Eclipse导入Android或其他的JAVA项目的正确方法 WORD版本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看下载别在

vite.config.js

里写 webpack 风格的

plugins

，Vite 插件 API 不兼容

define

配置只作用于构建阶段，dev 时

import.meta.env

是 proxy ，不能被

JSON.stringify

直接序列化若用

require('./data.json')

，需开启

resolve.alias

或改用

import data from './data.json?raw'

Esbuild 极快但缺失运行时能力，适合纯转译或 CLI 工具链它不做代码分割、不支持

require.ensure

、没有 HMR，本质是“超快的 TypeScript/JS 编译器”。适合：将 TS 库编译为多格式（

cjs

esm

iife

）发布作为其他工具（如

vitest

、

swc

）底层依赖，不直接暴露给应用层 CI 中快速验证语法：

esbuild --check --jsx=automatic src/index.tsx

注意：

esbuild

不解析

node_modules

中的

exports

字段，遇到

"exports": { ".": { "import": "./dist/esm/index.js" } }

会 fallback 到

main

，可能引入非 ESM 版本。真正卡住人的往往不是“怎么装”，而是没意识到：打包器决定模块解析规则、影响 tree-shaking 效果、甚至改变

this

绑定行为。比如

webpack

的

output.libraryTarget: 'umd'

和

vite

的

build.lib

输出结构完全不同，连

require('pkg')

是否能拿到默认导出都可能出问题。

相关文章