JavaScript 打包器esbuild的基础使用

esbuild是一种类似于webpack 的 极速 JavaScript 打包器。esbuild 项目主要目标是: 开辟一个构建工具性能的新时代,创建一个易用的现代打包器。

先安装esbuild

npm i esbuild -g

-g代表全局范围

检查esbuild的版本
esbuild --version

命令行构建

esbuild src\app.jsx --bundle --outfile=out.js

当然,我们可以配置package.json来进行简化我们的命令,

之后只需要执行npm run build即可

构建

Bundling for the browser
esbuild默认打包就是为浏览器进行打包,所以我们不需要进行其他配置就可以打包到浏览器使用,当然,我们可以通过其他的配置项进行更完善地打包,如果想要minification,那么可以配置--minify,如果需要使用sourcemap功能,可以配置--sourcemap。或许你需要指定打包到特定的浏览器进行使用,我们可以配置--target
演示一个minify
esbuild app.jsx --bundle --minify

参考文章:

https://juejin.cn/post/7035182298437779470  esbuild的基础使用

https://esbuild.bootcss.com/  esbuild 中文文档

https://esbuild.github.io/ 官方文档

https://www.cnblogs.com/yyh1/articles/15652563.html esbuild 介绍 和API使用

https://www.jianshu.com/p/d143645dd23e esbuild入门指南

https://blog.csdn.net/qq_41499782/article/details/119278871 esbuild 配置开发环境

https://blog.csdn.net/qq_21197033/category_12436526.html

https://github.com/cll123456/myPackage/tree/esbuild-dev

npm i和npm install的区别

1. npm i 仅仅是npm install的简写。

2. 用 npm i 安装的模块要用 npm uninstall i 才卸载掉,不加 i 无法卸载。

3. npm i 会检测当前node版本最匹配的npm包版本号,以及相互依赖应该提升的版本号的npm包

4. 部分npm包在当前node版本下无法使用,必须使用建议版本

5. 安装报错时 用 npm intall 会出现 npm-debug.log文件,npm i 不一定

posted @ 2024-03-08 16:06  培轩  阅读(54)  评论(0编辑  收藏  举报