无编译/无服务器，实现浏览器的CommonJS模块化

最新推荐文章于 2024-08-14 16:20:59 发布
最新推荐文章于 2024-08-14 16:20:59 发布
阅读量179 收藏
点赞数
分类专栏： 浏览器/虚拟机/服务器 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013451157/article/details/106171296
版权

前些天写一个demo，需要用到require去引一个node包，

但是又不想将其混进公司的整个node工程中去，因为想着越简单越好。

同时，webpack能不用也不用了吧，不然又得初始化个webpack工程。

在我折腾了半天后，发现一个利器 —— one-click.js。

我们知道，

如果希望CommonJS的模块化代码能在浏览器中正常运行，通常都会需要构建/打包工具，如webpack、rollup等。

而one-click.js是一个可以让你在不需要这些构件工具的同时，也可以在浏览器中正常运行基于CommonJS的模块系统。

https://github.com/jordwalke/one-click.js

abloume
关注
专栏目录
browser-commonjs:在浏览器中使用 CommonJS 模块
06-26
浏览器-commonjs 在浏览器中使用 CommonJS 模块。 安装 $ bower install browser-commonjs 用法 < script src =" contentloaded.js " > </ script > < script src =" browser-common.js " > </ script > < script type =" application/x-commonjs-module " main =" ./main " > </ script > 执照 麻省理工学院
breq:客户端的CommonJS`require`实现，不需要预编译构建步骤，也不需要服务器端中间件。 相反，它使用同步的XMLHttpRequest和eval，这确实施加了一系列限制，除非您愿意生成整个404。 糟糕的性能，动态的易用性
05-05
布雷克 “ breq”（浏览器需求）是客户端CommonJS require实现，不需要预编译构建步骤，也不需要服务器端中间件。 相反，它使用同步XMLHttpRequest和eval ，这确实施加了一系列除非您愿意生成整个404 s。 性能糟糕，动态易用性好。 入门 下载或。 在您的网页中： < script src =" dist/breq.min.js " > </ script > < script > var mod = require ( "./someCjsModule.js" ) ; </ script > 局限性 考虑到“ breq”基于浏览器的性质，要记住一些与Node的require.resolve查找算法不同的重要限制： 由于XMLHttpRequest浏览器安全设置，它只能在HTTP和HTTPS上工作。 它不执行任何实际的“查找”，仅解析提供的确切相
tiny-browser-require:浏览器端的一个微小的、简单的 CommonJS require() 实现
06-04
小浏览器需要 浏览器端的一个微小的、简单的 CommonJS require() 实现，只有 30 多行。 用法 首先将require.js放在您的页面上。 < script src =" require.js " /> 然后使用require.register来注册你的模块。 require . register ( "browser/debug.js" , function ( module , exports , require ) { // Module code goes here } ) ; 现在您可以使用 require 函数来加载模块。 var debug = require ( "browser/debug.js" ) ; 执照 麻省理工学院
浏览器加载 CommonJS 模块的原理与实现
weixin_34008933的博客
06-07 237
就在这个周末，npm 超过了 cpan ，成为地球上最大的软件模块仓库。 npm 的模块都是 JavaScript 语言写的，但浏览器用不了，因为不支持 CommonJS 格式。要想让浏览器用上这些模块，必须转换格式。 本文介绍浏览器加载 CommonJS 的原理，并且给出一种非常简单的实现。 一、原理 浏览器不兼容CommonJS的根本原因，在于缺少四...
对于模块加载：ES6、CommonJS、AMD、CMD的区别
weixin_30606461的博客
05-05 150
运行和编译的概念 编译包括编译和链接两步。 编译，把源代码翻译成机器能识别的代码或者某个中间状态的语言。 比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL。还简单的作一些比如检查有没有粗心写错啥关键字了啊.有啥词法分析,语法分析之类的过程。 链接，是把编译生成的二进制文件，组合成为一个系统可以执行的可执行文件。 运行： 把编译出来的可执行文件代码在系统中执行的...
【js 模块化】CommonJS / ES6模块化
one or only的博客
08-19 572
【js 模块化】CommonJS和ES6模块化
模块化：CommonJS规范
席木木的博客
10-02 2007
CommonJS规范中，每一个JS文件都可以作为一个模块。模块的引入，主要区分两个环境：①服务器端环境（Node.js）使用CommonJS模块；【2】浏览器端环境，于CommonJS中存在require语法，浏览器无法识别，因此，CommonJS模块需要借助Browserify提前做编译打包处理之后才能使用。
JS模块化总结 | CommonJS、ES6
最新发布
yavlgloss的博客
08-14 1966
JS模块化总结 | CommonJS、ES6
【JavaScript源代码】无编译无服务器实现浏览器的CommonJS模块化.docx
12-29
无编译无服务器实现浏览器的CommonJS模块化是一种在浏览器环境中直接运行CommonJS规范的模块化方法，无需借助像Webpack或Rollup这样的打包工具。CommonJS是Node.js中广泛使用的模块化规范，允许通过`require()`函数...
无服务器浏览器实现 CommonJS 模块化：one-click.js 解析
本文档探讨的是如何在浏览器环境中实现无编译、无服务器的CommonJS模块化，通过一个名为one-click.js的库来简化这一过程。CommonJS是Node.js中的模块规范，通常用于服务器端开发，但在浏览器环境下需要借助打包工具...
CommonJS时代的JS模块和编译工具
09-06
CommonJS是一种在服务器端JavaScript中实现模块化的规范，它的出现主要是为了标准化服务器端JavaScript模块的加载机制。CommonJS规范最初于2009年提出，它的设计理念是基于同步加载机制，并且以文件为模块的载体。在...
前端模块化,AMD,CMD,ES6 Module,CommonJS,ES6 模块与CommonJS 模块的差异
Zhixjs的博客
06-12 709
前端模块化 问题： 为什么前端要使用模块化？ ​ 模块化： 是具有特定功能的一个对象（ 广义理解 ） ​ 模块定义的流程： ​ 1.定义模块（对象） ​ 2.导出模块 ​ 3.引用模块 ​ 好处： 可以存储多个独立的功能块 复用性高 分类 1. AMD AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函...
04 【nodejs模块化规范：CommonJS】
DSelegent的博客
11-12 1130
04 【nodejs模块化规范：CommonJS】
ES6 Module的语法与实现
sxm666666的博客
06-24 278
ES6之前模块的加载方案有：CommonJS(服务器)和AMD(浏览器)两种,ES6中出现这个功能之后完全替代可前面两者。成为浏览器和服务器通用的模块解决方案。 ES6模块与CommonJS的差异 CommonJS输出的是一个值得拷贝，ES6模块输出的是值的引用 CommonJS输出的是一个拷贝，所有模块内部的变化无法影响其他模块。 ES6模块加载的机制：只要遇到一个模块加载import就会生成一个只读的引用，等真正执行脚本的时候，再根据这个引用到被夹在的模块中取值，所以ES6模块是动态引用的，并不会缓
commonJS 浏览器实现
weixin_34354945的博客
09-19 354
commonjs http://www.commonjs.org/ CommonJS JavaScript is a powerful object oriented language with some of the fastest dynamic language interpreters around. The official JavaScript specification d...
CommonJS基于浏览器端运用
eyes++的博客
05-29 770
我之前还有一篇CommonJS基于node环境运用，大家有兴趣可以去看看，放链接：CommonJS基于服务端(node运用) 先放文件目录：dist文件夹放打包生成的代码，src文件夹放自己写的代码 先初始化环境，方便下包： npm init 之所以不用 npm init --yes是因为我根目录叫browserify,后续下browserify包时不允许同名，当然也可以npm init --yes后再package.json手动更改name值。 src文件目录： module1.js: // 暴露一个
【JavaScript】arguments.callee的作用及替换方案
热门推荐
'Ablaze 的专栏
12-01 2万+
arguments.callee的作用　　 arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。 　　 请看下面这个非常经典的阶乘函数function factorial(num){ if (num <=1) { return 1;
【JavaScript】var a = b = 3;是如何执行的？
'Ablaze 的专栏
11-26 1万+
(function(){ var a = b = 3; })();console.log("a defined? " + (typeof a !== 'undefined')); console.log("b defined? " + (typeof b !== 'undefined'));　　由于 a 和 b 都定义在函数的封闭范围内，并且都始于 var关键字，大多数JavaScript开发人
【JavaScript】document.write()的用法和清空的原因
'Ablaze 的专栏
12-02 6321
可能很多朋友都遇到过这样的情况，那就是使用document.write()函数向网页中写内容的时候，会把文档中的原来的内容给清空，这一点对于初学者来说算是一个困扰，下面就介绍一下为什么会出现这种情况，当然也就知道如何避免此种情况的发生了。 　　先看一段代码实例:<!DOCTYPE html> <html> <head> <meta charset
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值