如何使用TypeScript和Webpack編寫網(wǎng)頁應(yīng)用

Codeing_ls 發(fā)布于2019-08-19 18:19 / 1218人閱讀

摘要：所以，如果你也考慮開始使用，不妨也看一下。使用模塊中，模塊的使用方法與一致。安裝好定義文件之后，如果使用等對支持較好的編輯器，則會提供更加強(qiáng)大的代碼提示功能。如果使用配合的，則可以方便地構(gòu)建瀏覽器可以運(yùn)行的代碼。

TypeScript所做的，是在JavaScript的基礎(chǔ)上加入了類型，TypeScript編譯器將TypeScript編譯成JavaScript，可以在瀏覽器或者nodejs平臺上運(yùn)行。最新版本的TypeScript語法根ES6標(biāo)準(zhǔn)已經(jīng)十分接近，而且因?yàn)槭荍S的超集，TS代碼中夾雜普通JS代碼也是可以的。所以，如果你也考慮開始使用Bable＋ES6，不妨也看一下TypeScript。

TypeScript項(xiàng)目和tsconfig.json

首先安裝TypeScript編譯器

npm i -g typescript

進(jìn)入項(xiàng)目目錄，新建一個(gè)hello.ts

function sayHello(name: string) {
    return "Hello, " + name;
}

let myName = "Cheng Wang";

console.log(sayHello(myName));

然后執(zhí)行

tsc hello.ts

編譯器會生成 hello.js

function sayHello(name) {
    return "Hello, " + name;
}
var myName = "Cheng Wang";
console.log(sayHello(myName));

為了方便編譯器和編輯器識別TypeScript項(xiàng)目，TypeScript約定了tsconfig.json文件來存儲項(xiàng)目配置，如果運(yùn)行tsc時(shí)不指定輸入文件，編譯器則會查找項(xiàng)目目錄中的這個(gè)文件，如果找不到則會依次向父級目錄查找。比如這樣：

{
    "compilerOptions": {
        "outFile": "dist/app.js",
        "sourceMap": true
    },
    "files": [
        "src/app.ts"
    ]
}

直接運(yùn)行tsc，會自動把src/app.ts編譯到dist/app.js。

關(guān)于這個(gè)配置文件的更多選項(xiàng)，可以看官方文檔。

使用模塊

TypeScript中，模塊的使用方法與ES6一致。

src/modules/utilities.ts：

function getUrlParam(key: string) {

  const REG_PATTERN = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
  let result: string[] = location.search.substr(1).match(REG_PATTERN);

  if (result !== null) {
    return decodeURIComponent(result[2]);
  } else {
    return null;
  }

}

export { getUrlParam }

src/app.ts：

import { getUrlParam } from "./modules/utilities";

let deviceType: string = getUrlParam("deviceType");

console.log(deviceType);

編譯后的app.js（TypeScript編譯器在輸出單個(gè)文件時(shí)，只能使用AMD或System模塊規(guī)范）：

define("modules/utilities", ["require", "exports"], function (require, exports) {
    "use strict";
    function getUrlParam(key) {
        var REG_PATTERN = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
        var result = location.search.substr(1).match(REG_PATTERN);
        if (result !== null) {
            return decodeURIComponent(result[2]);
        }
        else {
            return null;
        }
    }
    exports.getUrlParam = getUrlParam;
});
define("app", ["require", "exports", "modules/utilities"], function (require, exports, utilities_1) {
    "use strict";
    var deviceType = utilities_1.getUrlParam("deviceType");
    console.log(deviceType);
});

使用NPM庫

我們開發(fā)JS程序的時(shí)候，要用到NPM上的第三方的庫，比如jQuery、Lodash等，但是絕大多數(shù)庫都是用JS寫的，沒有類型提示，我們也不能在在代碼中將這些庫作為模塊引入。

比如我們需要在項(xiàng)目中使用Lodash：

npm i --save lodash

然后在代碼中引入：

import * as _ from "lodash";

console.log(_.camelCase("helloworld"))

運(yùn)行 tsc 則報(bào)錯(cuò)：

src/app.ts(1,20): error TS2307: Cannot find module "lodash".

如果想在TypeScript代碼中直接使用npm上的JS庫，需要借助Typings這個(gè)工具。

Typings也是一個(gè)包管理器，它管理的是JS代碼“定義文件”，用Typings安裝相應(yīng)的定義文件后，編輯器和編譯器就可以去node_modules目錄中找到相應(yīng)的JS庫，并編譯到最終的JS代碼中。

先安裝Typings工具：

npm i -g typings

然后安裝Lodash的定義文件：

typings install --save lodash

Typings會去NPM、Bower上尋找?guī)斓淖髡呒拥亩x文件，但是有的庫如jQuery并沒有官方的定義文件，則需要從社區(qū)維護(hù)的DefinitelyTyped目錄下安裝：

typings install --save --ambient jquery

然后再tsconfig.json中的files配置中加入一條：

"files": [
    "src/app.ts"，
    "typings/main.d.ts"
]

此時(shí)編譯就不會提示找不到模塊了。

安裝好定義文件之后，如果使用Visual Studio Code等對TypeScript支持較好的編輯器，則會提供更加強(qiáng)大的代碼提示功能。

使用Webpack構(gòu)建

TypeScript編譯器支持很多模塊組織規(guī)范，如ES6、commonJS、AMD等，但是如果想要將多個(gè)ts文件打包成一個(gè)文件，TypeScript只支持AMD和System，對于瀏覽器應(yīng)用來說，還需要引入第三方的模塊加載器。如果使用Webpack配合TypeScript的loader，則可以方便地構(gòu)建瀏覽器可以運(yùn)行的JS代碼。

首先安裝Webpack和ts-loader：

npm i webpack -g

npm i ts-loader --save-dev

然后配置項(xiàng)目目錄中的webpack.config.js:

module.exports = {

  entry: "./src/app.ts",
  
  output: {
    filename: "app.js",
    path: "./dist"
  },
  
  resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
  },
  
  module: {
    loaders: [
      { test: /.ts$/, loader: "ts-loader" }
    ]
  }
  
}

然后就可以通過運(yùn)行webpack來構(gòu)建了，構(gòu)建生成的代碼自帶了webpack的模塊加載器，可以直接在瀏覽器中運(yùn)行。

GPU云服務(wù)器云服務(wù)器應(yīng)用防火墻如何使用 webpack使用輕量應(yīng)用服務(wù)器如何使用 web應(yīng)用防火墻如何使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/79450.html

發(fā)表評論

登陸后可評論

0條評論

Codeing_ls

男|高級講師

我要關(guān)注我要私信

TA的文章

pacificrack：VPS中秋促銷，$19.20/年，4核/4G/25G SSD/2.5T月流量

閱讀 2222·2021-09-24 10:31
買了虛擬主機(jī)怎么用-如何購買虛擬主機(jī)？需要注意什么？

閱讀 3875·2021-09-22 15:16
三年前，我差點(diǎn)成了爬蟲大師

閱讀 3395·2021-09-22 10:02
全國計(jì)算機(jī)等級考試二級Python（2021年9月）備考筆記第十二天

閱讀 1010·2021-09-22 10:02
計(jì)劃在2021年進(jìn)行響應(yīng)式開發(fā)？但不確定應(yīng)該選擇哪種技術(shù)來快速且低成本的開發(fā)應(yīng)用程序？一文給你解決問

閱讀 1822·2021-09-08 09:36
H5手機(jī)端開發(fā)問題匯總及解決方案

閱讀 1974·2019-08-30 14:18
# 是的，是你的BFC - CSS中常用

閱讀 609·2019-08-30 10:51
六位字符密碼輸入器

閱讀 1863·2019-08-29 11:08

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何使用TypeScript和Webpack編寫網(wǎng)頁應(yīng)用

相關(guān)文章

webpack實(shí)戰(zhàn)

前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略、Vue 單元測試、Headless Chrom

Vue 2019開發(fā)者圖譜

2018前端值得關(guān)注的技術(shù)

2018前端值得關(guān)注的技術(shù)

發(fā)表評論

0條評論

Codeing_ls

男|高級講師

TA的文章

pacificrack：VPS中秋促銷，$19.20/年，4核/4G/25G SSD/2.5T月流量

買了虛擬主機(jī)怎么用-如何購買虛擬主機(jī)？需要注意什么？

三年前，我差點(diǎn)成了爬蟲大師

全國計(jì)算機(jī)等級考試二級Python（2021年9月）備考筆記第十二天

計(jì)劃在2021年進(jìn)行響應(yīng)式開發(fā)？但不確定應(yīng)該選擇哪種技術(shù)來快速且低成本的開發(fā)應(yīng)用程序？一文給你解決問

H5手機(jī)端開發(fā)問題匯總及解決方案

# 是的，是你的BFC - CSS中常用

六位字符密碼輸入器

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何使用TypeScript和Webpack編寫網(wǎng)頁應(yīng)用

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！