requirejs之局部require函數踩坑

gityuan 發布于2019-08-21 11:34 / 1093人閱讀

摘要：問題就出在這個方法上，它將整個回調函數轉成了，然后在中通過字符串來尋找依賴。其實，在執行前會執行另一個方法，參考文章得知，首先會執行來判斷回調函數中有幾個參數，個參數時就認為傳入了，個參數時就認為傳入了和，個參數時認為傳入了，和。

最近用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入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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