browserify

简介: browserify

很奇怪,我们不屑与他人为伍,却害怕自己与众不同。——保罗·科埃略的《韦罗妮卡决定去死》

今天又来分享个好东西:https://browserify.org/

这个玩意儿可以帮我们把npm下载的依赖,使用script标签引入:

先安装:

pnpm install -g browserify

比如我们引入一个outils

pnpm i outils

然后编写一个main.js

const outils = require('模块名')
window.模块名 = 模块名
// 例如
const outils = require('outils')
window.outils = outils

生成

browserify main.js -o [文件名]
# 例如
browserify main.js -o bundle.js

然后我们引入这个js试试

<script src="bundle.js"></script>

运行一下,可以看到我们能在控制台拿到,说明引入成功

有朋友说,outils官方有min.jshttps://www.npmjs.com/package/outils

🏗 安装使用

  1. 直接下载min目录下的outils.min.js使用,支持UMD通用模块规范
  2. 使用npm安装

浏览器:

<script src="outils.min.js"></script> 
<script>
    var OS = outils.getOS()
</script>

哪还要你这么费劲

我只想说有些依赖只提供了npm下载方式的话,可以用这个,你可以不用 😄

相关文章
|
前端开发 JavaScript
nuxt3:postcss-pxtorem
nuxt3:postcss-pxtorem
464 0
nuxt3:postcss-pxtorem
|
JavaScript 前端开发 Ruby
打包出来的 common.js/umd.js 是啥?
打包出来的 common.js/umd.js 是啥?
246 0
|
设计模式 前端开发 JavaScript
CJS,AMD,UMD和ESM区别
说到 CJS, AMD, UMD 和 ESM 四者的区别,不得不提一下模块这个概念。 CJS CJS(CommonJs) 适用于后端 Node。 Node 与 Javascript 最开始是没有模块这
340 0
|
Rust 编译器 Go
你真的了解ESM吗?
模块兼容性 推荐阅读指数⭐️⭐️⭐️ ESM是个啥 推荐阅读指数⭐️⭐️⭐️⭐️ 在浏览器中使用ESM 推荐阅读指数⭐️⭐️⭐️⭐️ 模块指定符 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 默认情况下,模块是defer的 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 动态导入 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ import.meta 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 优化建议 推荐阅读指数⭐️⭐️⭐️ 网站中使用ESM 推荐阅读指数⭐️⭐️⭐️
152 0
你真的了解ESM吗?
|
缓存 Rust 前端开发
esbuild + swc 能有多快?
前端工具层出不穷,之前有常用的打包工具webpack,现在有了速度更快的vite。 vite的开发模式是基于esBuild编译的,打包又是基于rollup,启动项目是很快的。
790 0
esbuild + swc 能有多快?
|
前端开发 JavaScript 测试技术
postcss及其插件autoprefixer、postcss-preset-env、stylelint的使用
postcss及其插件autoprefixer、postcss-preset-env、stylelint的使用
285 0
Nuxt.js 使用sass
Nuxt.js 使用sass
147 0
|
JavaScript 前端开发 API
Vue3组件库打包指南,一次生成esm、esm-bundle、commonjs、umd四种格式
本文为`Varlet`组件库源码主题阅读系列第二篇,读完本篇,你可以了解到如何将一个Vue3组件库打包成各种格式
636 0
|
JavaScript 前端开发
|
JavaScript 前端开发 测试技术
js之常用npm包
js之常用npm包
5016 0