requirejs之局部require函数踩坑

gityuan 发布于2019-08-21 11:34 / 1015人阅读

摘要：问题就出在这个方法上，它将整个回调函数转成了，然后在中通过字符串来寻找依赖。其实，在执行前会执行另一个方法，参考文章得知，首先会执行来判断回调函数中有几个参数，个参数时就认为传入了，个参数时就认为传入了和，个参数时认为传入了，和。

最近用gulp压缩了一下requirejs项目中的文件，出现了让人很纠结的错误，原代码

define(funciton(require){
    var $ require = $("jquery");
});

压缩后：

define(function(n){var $ = n("jquery")});
报错：Uncaught Error: Module name "jquery" has not been loaded yet for context

可以看到压缩前后唯一的区别就是，函数名require被替换了更精简的n。讲道理require作为一个形参，叫啥名字应该都没关系的，可偏偏就出了错。
更神奇的是只要将函数内部的n改成require就不报错了：

define(function(n){var $ = require("jquery")});

蛋疼，明明传进来的是n，哪来的require啊。
虽然局部require只是requirejs的一个语法糖，但没道理压缩后就会报错啊。一番搜索后终于找到原因。
根据官网文档局部require最终会被转化为define([])形式，但是转化的方法比较特殊，是通过Function.prototype.toString()来获取依赖值的。问题就出在这个Function.prototype.toString()方法上，它将整个回调函数转成了string，然后在string中通过"require"字符串来寻找依赖。所以，局部require不能被替换成其它名字，而且require()中不能放变量或者path，因为转成字符串后可识别不出这些。
其实，在执行Function.prototype.toString()前会执行另一个方法，参考文章得知，首先会执行unction.prototype.length来判断回调函数中有几个参数，1个参数时就认为传入了require，2个参数时就认为传入了require和exports，3个参数时认为传入了require，exports和module。这也是为什么

define(function(n){var $ = require("jquery")});

能够正常运行的原因。
官网推荐的解决办法是全改成常规的define([])来定义依赖。
我目前的做法是配置gulp不压缩name:

var uglify = require("gulp-uglify");
gulp.task("default",function(){
    gulp.src(path).pipe(uglify({mangle:false}));
});

希望此文章对大家有所帮助。

GPU云服务器云服务器局部函数 Requirejs requirejs例子 RequireJS入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86875.html

前端模块化开发

摘要：来源于阿贤博客模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化是指在解决某个复杂混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。来源于：阿贤博客 javascript模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化：是指在解决某个复杂、混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块...

tianhang 2019-08-23 16:44 评论0 收藏0
AMD, CMD, CommonJS和UMD

摘要：若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。其中是一个数组，里面的成员就是要加载的模块是模块加载完成之后的回调函数。在加载与两个模块之后执行回调函数实现具体过程。在判断是否支持是否存在，存在则使用方式加载模块。我的github(PS:希望star): https://github.com/tonyzheng1... 今天由于项目中引入的echarts的文件太大，req...

KavenFan 2019-08-19 18:02 评论0 收藏0
Javascript模块全揽

摘要：要求模块编写必须在真正的代码之外套上一层规定的代码包装，样子看起来是这样的模块代码通过传递一个签名为的回调函数给函数，就可以把需要注入的变量和函数注入到模块代码内。之前写的文章急速Js全栈教程得到了不错的阅读量，霸屏掘金头条3天，点赞过千，阅读近万，甚至还有人在评论区打广告，可见也是一个小小的生态了；）。看来和JS全栈有关的内容，还是有人颇有兴趣的。 showImg(https://...

lily_wang 2019-08-23 11:41 评论0 收藏0
OMD: javascript模块化开发兼容CommonJS, AMD, CMD 以及原生 JS

摘要：它就是一套兼容方案，目前兼容的有以及原生支持。返回值问题在第一次使用时，。具体是什么意义呢的返回值，其实就是插件提供的对外接口，而实际上，就是一个对象。而在环境下，只需要将这个返回值赋予即可完成该模块的接口。有更新，请到github上看源码什么是OMD 在node.js流行起来之前，javascript的开发方式都是函数式的顺序依赖关系，直到node火起来。CommonJS其实首先...

lavor 2019-08-19 17:31 评论0 收藏0
初学RequireJS

摘要：本文以初学身份对比和来说明前者的优点，若使用其它库，可以眼动将替换为你所用的库模块化，实现某一功能的方法独立化，使其可以复用这一高大上的名词，按我的理解，和插件的功能一样那为什么需要学习呢，是将定义为全局变量，在脚本的任何地方都能调用中的方本文以初学身份对比RequireJS和jQuery来说明前者的优点，若使用其它库，可以眼动将jQuery替换为你所用的js库；模块化，实现某一功...

cheng10 2019-08-19 18:01 评论0 收藏0