requirejs之部分require函数踩坑

近来用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}));
});

愿望此文章对人人有所协助。

    原文作者:求不得
    原文地址: https://segmentfault.com/a/1190000008634601
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞