Laya 引用 第三方JS庫

一般情況下充尉,使用script標(biāo)簽引入js文件飘言,然后下載相應(yīng)的d.ts或者自己手寫一個(gè)就可以了(關(guān)于d.ts可以參考TypeScript Handbook讀書筆記第四章 d.ts聲明)。

一驼侠、DefinitelyTyped

這個(gè)項(xiàng)目里有很多別人弄好的d.ts姿鸿,可以下載使用。
參考 [翻譯] DefinitelyTyped 項(xiàng)目定義 .d.ts文件

二倒源、typings

typings是一個(gè)包管理器用來獲取聲明文件苛预。我們將會(huì)使用它來獲取聲明文件。
typings install --global --save dt~knockout
--global標(biāo)記會(huì)告訴Typings從DefinitelyTyped去獲取聲明文件笋熬,這是由社區(qū)維護(hù)的.d.ts文件倉庫热某。
這個(gè)命令會(huì)在當(dāng)前目錄下創(chuàng)建一個(gè)typings.json文件和一個(gè)typings文件夾。

具體可以參考typescript 如何使用js 庫

使用npm全局安裝typings :npm install -g typings
搜索資源胳螟,支持模糊搜索:typings search base64
安裝ts庫:typings install base-64 --save
安裝js庫苫拍,否則無法運(yùn)行:npm install base-64 --save 注意,這兩個(gè)文件名字要一樣

三旺隙、問題

1.lodash
按照上面兩個(gè)方式都試了,發(fā)現(xiàn)typings那個(gè)方式的d.ts文件不行。區(qū)別可以參考egret是不是不支持import骏令?

我看4.1.0版本的第三方庫的配置里追加了typings的字段蔬捷,于是用typings下了個(gè)lodash的d.ts。d.ts的內(nèi)容大概就是一個(gè)大module。

declare module 'lodash' {
    var _: _.LoDashStatic;
    namespace _ {

        xxxx
    }
    export = _;
}

正常來說在TS里用import * as _ from 'lodash'周拐,來引入并且編譯什么的都沒問題铡俐。但是并不能運(yùn)行。妥粟。編譯后的JS把import轉(zhuǎn)化成var _ = require("lodash");報(bào)require is not defined审丘。

于是我翻找了一個(gè)并非用typings下載但能用的d.ts,大概結(jié)構(gòu)如下:

declare var _: _.LoDashStatic;
declare module _ {

    xxx
}
declare module "lodash" {
    export = _;
}

這個(gè)不用import就可以直接用使用勾给。滩报。。

在typings生成的d.ts中也可以看到來源并不是definitelyTyped

// Generated by typings
// Source: https://raw.githubusercontent.com/types/
npm-lodash/6557c3cd628ef6b39abfdc826b27ea1f06d8af89/index.d.ts

2.qs
參考qs JSON區(qū)別
功能雖然都是序列化播急。假設(shè)我要提交的數(shù)據(jù)如下

var a = {name:'hehe',age:10};
//qs.stringify序列化結(jié)果如下
name=hehe&age=10
//而JSON.stringify序列化結(jié)果如下:
"{"a":"hehe","age":10}"

vux中使用post提交表單數(shù)據(jù):

this.$http.post(this.$sign.config.url.loginUrl,this.$qs.stringify({
    "phone":this.phoneNumber,
    "vCode":this.loginCode,
    "smsCode":this.phoneCode    
    })
)
.then(response=>{
    console.log(response.data);
    if(response.data.httpCode == 200){
        
    }else{
        
    }
})

在firebug中可以看到傳遞的參數(shù):
phone=15210275239&vCode=8vsd&smsCode=1534

但是按照lodash的處理方式脓钾,發(fā)現(xiàn)不能用。報(bào)錯(cuò):Uncaught ReferenceError: require is not defined

3.介紹一下Browserify
參考Browserify + watchify

NodeJS 把 JavaScript 的使用從瀏覽器端擴(kuò)展到了服務(wù)器端桩警,使得前端開發(fā)人員可以用熟悉的語言編寫服務(wù)器端代碼可训。這一變化使得 NodeJS 很快就流行起來。在 NodeJS 社區(qū)中有非常多的高質(zhì)量模塊可以直接使用捶枢。根據(jù)最新的統(tǒng)計(jì)結(jié)果握截,NodeJS 的 npm 中的模塊數(shù)量已經(jīng)超過了 Java 的 Maven Central 和 Ruby 的 RubyGems,成為模塊數(shù)量最多的社區(qū)烂叔。不過這些 NodeJS 模塊并不能直接在瀏覽器端應(yīng)用中使用谨胞,原因在于引用這些模塊時(shí)需要使用 NodeJS 中的 require 方法,而該方法在瀏覽器端并不存在长已。Browserify 作為 NodeJS 模塊與瀏覽器端應(yīng)用之間的橋梁畜眨,讓應(yīng)用可以直接使用 NodeJS 中的模塊,并可以把應(yīng)用所依賴的模塊打包成單個(gè) JavaScript 文件术瓮。通過 Browserify 還可以在應(yīng)用開發(fā)中使用與 NodeJS 相同的方式來進(jìn)行模塊化和管理模塊依賴康聂。

以下是官網(wǎng)教程:
Here is a tutorial on how to use Browserify on the command line to bundle up a simple file called main.js along with all of its dependencies:

main.js
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

Install the uniq module with npm:
npm install uniq
Now recursively bundle up all the required modules starting at main.js into a single file called bundle.js with the browserify command:
browserify main.js -o bundle.js
Browserify parses the AST for require() calls to traverse the entire dependency graph of your project.Drop a single <script> tag into your html and you're done!
<script src="bundle.js"></script>

但是我在測試的時(shí)候失敗了

<script>
document.write("Hello World!");
var unique = require('uniq');
var data = [1, 2222, 2222, 3, 4, 555, 5, 5, 6];
console.log(unique(data));
</script>

報(bào)錯(cuò)是Uncaught ReferenceError: require is not defined

參考browserify#external-requires
You can just as easily create a bundle that will export a require() function so you can require() modules from another script tag. Here we'll create a bundle.js with the through and duplexer modules.
$ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js
Then in your page you can do:

<script src="bundle.js"></script>
<script>
  var through = require('through');
  var duplexer = require('duplexer');
  var myModule = require('my-module');
  /* ... */
</script>

可是這個(gè)-r參數(shù)實(shí)在有點(diǎn)奇怪,好幾次搞出Error:Cannot find module ...
最終browserify -r uniq main.js > bundle.js搞定胞四,控制臺(tái)終于打印出我們想要的結(jié)果[1, 2222, 3, 4, 5, 555, 6]

4.回到第2步恬汁,用Browserify把qs處理一下:
browserify -r qs qs.js > bundle.js
然后在index.html中

<script>
document.write("Hello World!");
var a = {name:'hehe',age:10};
var qs = require('qs');
console.log("qs",qs.stringify(a));
</script>

控制臺(tái)看到qs name=hehe&age=10,OK!
不過放到LAYA項(xiàng)目中辜伟,require編譯會(huì)報(bào)錯(cuò)氓侧。這里隨便寫個(gè)d.ts騙一騙吧,比如我寫了個(gè)browserify.d.ts:
declare function require(args:string);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末导狡,一起剝皮案震驚了整個(gè)濱河市约巷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌旱捧,老刑警劉巖独郎,帶你破解...
    沈念sama閱讀 217,185評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件踩麦,死亡現(xiàn)場離奇詭異,居然都是意外死亡氓癌,警方通過查閱死者的電腦和手機(jī)谓谦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贪婉,“玉大人反粥,你說我怎么就攤上這事∑S兀” “怎么了才顿?”我有些...
    開封第一講書人閱讀 163,524評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長鬼譬。 經(jīng)常有香客問我娜膘,道長,這世上最難降的妖魔是什么优质? 我笑而不...
    開封第一講書人閱讀 58,339評(píng)論 1 293
  • 正文 為了忘掉前任竣贪,我火速辦了婚禮,結(jié)果婚禮上巩螃,老公的妹妹穿的比我還像新娘演怎。我一直安慰自己,他們只是感情好避乏,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評(píng)論 6 391
  • 文/花漫 我一把揭開白布爷耀。 她就那樣靜靜地躺著,像睡著了一般拍皮。 火紅的嫁衣襯著肌膚如雪歹叮。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,287評(píng)論 1 301
  • 那天铆帽,我揣著相機(jī)與錄音咆耿,去河邊找鬼。 笑死爹橱,一個(gè)胖子當(dāng)著我的面吹牛萨螺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播愧驱,決...
    沈念sama閱讀 40,130評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼慰技,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了组砚?” 一聲冷哼從身側(cè)響起吻商,我...
    開封第一講書人閱讀 38,985評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎糟红,沒想到半個(gè)月后手报,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蚯舱,經(jīng)...
    沈念sama閱讀 45,420評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評(píng)論 3 334
  • 正文 我和宋清朗相戀三年掩蛤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陈肛。...
    茶點(diǎn)故事閱讀 39,779評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡揍鸟,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出句旱,到底是詐尸還是另有隱情阳藻,我是刑警寧澤,帶...
    沈念sama閱讀 35,477評(píng)論 5 345
  • 正文 年R本政府宣布谈撒,位于F島的核電站腥泥,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏啃匿。R本人自食惡果不足惜蛔外,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望溯乒。 院中可真熱鬧夹厌,春花似錦、人聲如沸裆悄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽光稼。三九已至或南,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間艾君,已是汗流浹背采够。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留腻贰,地道東北人吁恍。 一個(gè)月前我還...
    沈念sama閱讀 47,876評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像播演,于是被迫代替她去往敵國和親冀瓦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 作者:小 boy (滬江前端開發(fā)工程師)本文原創(chuàng),轉(zhuǎn)載請(qǐng)注明作者及出處洲炊。原文地址:https://www.smas...
    iKcamp閱讀 2,758評(píng)論 0 18
  • 在現(xiàn)在的前端開發(fā)中感局,前后端分離尼啡、模塊化開發(fā)、版本控制询微、文件合并與壓縮崖瞭、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,439評(píng)論 1 32
  • GitChat技術(shù)雜談 前言 本文較長,為了節(jié)省你的閱讀時(shí)間撑毛,在文前列寫作思路如下: 什么是 webpack书聚,它要...
    蕭玄辭閱讀 12,691評(píng)論 7 110
  • https://github.com/jobbole/awesome-javascript-cn 包管理器管理著 ...
    孫雪冬閱讀 6,038評(píng)論 3 66
  • cmd命令: ./ 當(dāng)前目錄 ../ 上一級(jí) dir 查看當(dāng)前目錄 ls 查看當(dāng)前目錄下文件 win...
    3hours閱讀 548評(píng)論 0 1