引题

常使用框架的孩子们，想要引入一个包时候，通常操作是：

npm i xxx
Vue/React组件里通过import/require 引入
可以使用了

某天，当你正在欢乐地写一个html页面时，忽然想使用一个包。于是你向往常一样

npm init
npm i xxx
在页面里import/require引入

这时却发现报错了。WHY?首先要清楚JS有两种运行环境：浏览器环境和Node.js环境像module/exports/require属于CommonJS语法，CommonJS是Node.js采用的模块化规范，而浏览器环境下不支持该语法，所以没有这些变量。所以，其报错原因就是因为浏览器下没有这些定义好的变量。

模块化

换句话说，只要浏览器环境下存在这些变量，我们就能正常使用require下面是一个简单的例子，可以跑在浏览器环境下并正常输出。

const module = {   exports: {} };const require = (fileModule) => fileModule.exports;// 创建一个虚拟文件function createInventFile(module, exports) {  exports.double = (num) => num * 2;  return module}const file = createInventFile(module, module.exports);const { double } = require(file);console.log(double(4));

如何运行在不同环境

如何跑在浏览器环境？

创建一个html，在script标签里写
直接打开浏览器控制台，输入js代码

如何跑在Node环境？

终端输入node，进入node环境，输入js代码
创建一个x.js，终端node x.js 运行

以上代码跑在Node下会报错，因为module等变量都是已定义

browserify

其实，工具browserify已经帮我们实现了以上操作，可以在浏览器下愉快的使用模块化。

npm init
npm i -D browserify
browserify index.js -o compiled.index.js 编译为浏览器可识别的文件

添加npm包

有两种方法可以在浏览器环境下使用npm包

把包下载到项目中，引入脚本
引入cdn

使用Node模块，如fs

想在浏览器环境下使用这些模块？不存在的。前面的browserify仅仅是将CommonJS的模块加载机制转化为浏览器可以理解的代码，所以我们能够像在Node下一样在浏览器环境下使用exports和require。但这不意味着，我们可以任意使用Node.js模块代码。比如fs，浏览器本身是有沙箱限制的，并不能允许我们任意操作本地文件，这与其安全机制背道而驰。然而chrome 83版本开始，在用户授权的情况下，允许浏览器读写用户本地文件了，有兴趣的同学参考这篇文章。怎么办？

使用node写一个服务，单独执行。与可执行文件一起打包。打开页面的时候，运行个批处理服务器。

如果文章有什么错误或者大家有什么建议，快来联系我～～～

上次写的文章在掘金平台发布后被推到了首页，也不知道它是啥标准。但不得不说，这种正向反馈对于个人的持续输出还是有推动作用的。

require无法使用变量_被框架玩坏的孩子们浏览器环境下使用require相关推荐

linux bash 变量_如何在Linux上的Bash中设置环境变量
linux bash 变量 fatmawati achmad zaenuri/Shutterstock Fatmawati achmad zaenuri / Shutterstock There's ...
艾蔻智能机器人怎么连接网络_班尼机器人在没有WIFI网络的环境下如何上网？...
我们有时在外边没有WIFI环境下的时候如何做好连接班尼机器人上网呢?班尼机器人不止是在有WIFI网络下连接玩,更有方便我们随身带到任何地方都可以随时随地玩!只要一台手机就能玩起来,不用2台手机咯!之前 ...
右键菜单无响应_被流氓软件玩坏了？这两个清理工具拯救你凌乱的右键菜单。...
Hello 这里是一周进步我们写了四年近2000篇的干货文章,还分享了许多实用的神器工具,一路以来,感谢大家的支持与陪伴~ 文 / 一周进步 · 安哥拉如果你和我们一样,是一个喜欢在电脑上安装各种 ...
我的文档目录环境变量_从.env文件中为NodeJS加载环境变量
作者:Writer Staff 翻译:疯狂的技术宅原文:https://coderrocketfuel.com/article/how-to-load-environment-variables-f ...
mac电脑配置java环境变量_教你在Mac系统中配置JAVA环境变量的方法
Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.下面向大家介绍Mac电脑上如何配置Java ...
centos配置occi环境变量_拓展学习-golang的下载、安装和环境配置教程
由于国内众所周知的原因,我们是不能直接访问到golang官网的,因此下载go语言的安装包还需要另辟蹊径.下面我们以用国内的golang源来下载安装包为例,阐述golang的下载.安装和配置方法. go ...
c语言重定义不同的基类型_简述usb连接器输出类型定义和不同环境下的用法
"简述usb连接器输出类型定义和不同环境下的用法"由仁昊伟业http://renhotec.cn为您整理,采购连接器,上仁昊伟业. USB连接器是各种电子设备连接需求的实用设备,同 ...
python如何打出英文括号_用python的re(正则表达式)模块匹配英文环境下的括号
在用re(正则表达式)模块匹配掉文本中的括号时,总是出现各种各样的问题,经过将近一个小时的摸索,终于找到了问题的所在. 案例: 将 txt = 'Linux系统安装 - 1.1(Av20994127, ...
树莓派可以频繁重启吗_手机资讯: iPhone XS Max 可以在低温环境下使用吗冬天设备频繁关机怎么办...
如今使用IT数码设备的小伙伴们是越来越多了,那么IT数码设备当中是有很多知识的,这些知识很多小伙伴一般都是不知道的,就好比最近就有很多小伙伴们想要知道 iPhone XS Max 可以在低温环境下使用 ...

require无法使用变量_被框架玩坏的孩子们浏览器环境下使用require

引题

模块化

如何运行在不同环境

browserify

添加npm包

使用Node模块，如fs

require无法使用变量_被框架玩坏的孩子们浏览器环境下使用require相关推荐

最新文章

热门文章