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 前端开发 Ruby
打包出来的 common.js/umd.js 是啥?
打包出来的 common.js/umd.js 是啥?
278 0
|
Rust 编译器 Go
你真的了解ESM吗?
模块兼容性 推荐阅读指数⭐️⭐️⭐️ ESM是个啥 推荐阅读指数⭐️⭐️⭐️⭐️ 在浏览器中使用ESM 推荐阅读指数⭐️⭐️⭐️⭐️ 模块指定符 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 默认情况下,模块是defer的 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 动态导入 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ import.meta 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 优化建议 推荐阅读指数⭐️⭐️⭐️ 网站中使用ESM 推荐阅读指数⭐️⭐️⭐️
157 0
你真的了解ESM吗?
|
缓存 Rust 前端开发
esbuild + swc 能有多快?
前端工具层出不穷,之前有常用的打包工具webpack,现在有了速度更快的vite。 vite的开发模式是基于esBuild编译的,打包又是基于rollup,启动项目是很快的。
798 0
esbuild + swc 能有多快?
|
前端开发 JavaScript 测试技术
postcss及其插件autoprefixer、postcss-preset-env、stylelint的使用
postcss及其插件autoprefixer、postcss-preset-env、stylelint的使用
305 0
|
JavaScript 前端开发 API
Vue3组件库打包指南,一次生成esm、esm-bundle、commonjs、umd四种格式
本文为`Varlet`组件库源码主题阅读系列第二篇,读完本篇,你可以了解到如何将一个Vue3组件库打包成各种格式
644 0
|
JavaScript 前端开发
|
JavaScript 前端开发 Go
使用 esbuild 来打包一个 React 库
esbuild 是一个非常快的 Javascript 打包工具,本文结合 react 对 esbuid 这个打包工具进行了简单使用。
657 0
|
JavaScript 前端开发 测试技术
js之常用npm包
js之常用npm包
5024 0
|
JavaScript 数据格式 JSON
Vuei18n 实际应用 不使用打包工具篇!
Vuei18n 实际应用 不使用打包工具篇!
2027 0
|
JavaScript 开发工具 Android开发
cordova 打包工具
原文:cordova 打包工具 一、环境安装 1、安装NodeJs https://nodejs.org 直接去官网下载并按默认路径安装就可以了。 安装完成后在命令行:   (测试成功!) $ npm 2、安装Cordova 命令行:$ npm install -g cordova 如...
1481 0