资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/如何使用TypeScript和Webpack编写网页应用

如何使用TypeScript和Webpack编写网页应用

Codeing_ls / 1133人阅读

摘要：所以，如果你也考虑开始使用，不妨也看一下。使用模块中，模块的使用方法与一致。安装好定义文件之后，如果使用等对支持较好的编辑器，则会提供更加强大的代码提示功能。如果使用配合的，则可以方便地构建浏览器可以运行的代码。

TypeScript所做的，是在JavaScript的基础上加入了类型，TypeScript编译器将TypeScript编译成JavaScript，可以在浏览器或者nodejs平台上运行。最新版本的TypeScript语法根ES6标准已经十分接近，而且因为是JS的超集，TS代码中夹杂普通JS代码也是可以的。所以，如果你也考虑开始使用Bable＋ES6，不妨也看一下TypeScript。

TypeScript项目和tsconfig.json

首先安装TypeScript编译器

npm i -g typescript

进入项目目录，新建一个hello.ts

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

let myName = "Cheng Wang";

console.log(sayHello(myName));

然后执行

tsc hello.ts

编译器会生成 hello.js

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

为了方便编译器和编辑器识别TypeScript项目，TypeScript约定了tsconfig.json文件来存储项目配置，如果运行tsc时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。比如这样：

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

直接运行tsc，会自动把src/app.ts编译到dist/app.js。

关于这个配置文件的更多选项，可以看官方文档。

使用模块

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编译器在输出单个文件时，只能使用AMD或System模块规范）：

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库

我们开发JS程序的时候，要用到NPM上的第三方的库，比如jQuery、Lodash等，但是绝大多数库都是用JS写的，没有类型提示，我们也不能在在代码中将这些库作为模块引入。

比如我们需要在项目中使用Lodash：

npm i --save lodash

然后在代码中引入：

import * as _ from "lodash";

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

运行 tsc 则报错：

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

如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。

Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，编辑器和编译器就可以去node_modules目录中找到相应的JS库，并编译到最终的JS代码中。

先安装Typings工具：

npm i -g typings

然后安装Lodash的定义文件：

typings install --save lodash

Typings会去NPM、Bower上寻找库的作者加的定义文件，但是有的库如jQuery并没有官方的定义文件，则需要从社区维护的DefinitelyTyped目录下安装：

typings install --save --ambient jquery

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

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

此时编译就不会提示找不到模块了。

安装好定义文件之后，如果使用Visual Studio Code等对TypeScript支持较好的编辑器，则会提供更加强大的代码提示功能。

使用Webpack构建

TypeScript编译器支持很多模块组织规范，如ES6、commonJS、AMD等，但是如果想要将多个ts文件打包成一个文件，TypeScript只支持AMD和System，对于浏览器应用来说，还需要引入第三方的模块加载器。如果使用Webpack配合TypeScript的loader，则可以方便地构建浏览器可以运行的JS代码。

首先安装Webpack和ts-loader：

npm i webpack -g

npm i ts-loader --save-dev

然后配置项目目录中的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" }
    ]
  }
  
}

然后就可以通过运行webpack来构建了，构建生成的代码自带了webpack的模块加载器，可以直接在浏览器中运行。

云服务器 海外云主机 应用防火墙如何使用 webpack使用 轻量应用服务器如何使用 web应用 防火墙如何使用

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

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

相关文章

  • webpack实战

    摘要：和类似的预处理器还有等。的用处非常多，包括给自动加前缀使用下一代语法等，目前越来越多的人开始用它，它很可能会成为预处理器的最终赢家。 webpack实战 查看所有文档页面：全栈开发，获取更多信息。快马加鞭，加班加点，终于把这个文档整理出来了，顺便深入地学习一番，巩固知识，就是太累人，影响睡眠时间和质量。极客就是想要把事情做到极致，开始了就必须到达终点。 原文链接：webpack实战，原...

    cyrils 评论0 收藏0

  • 前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

    摘要：前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期：Web 现状分析与优化策略...

    HackerShell 评论0 收藏0

  • Vue 2019开发者图谱

    摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。 作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

    cgspine 评论0 收藏0

  • 2018前端值得关注的技术

    摘要：年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。自从谷歌提出后，就持续的获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家...

    xiao7cn 评论0 收藏0

  • 2018前端值得关注的技术

    摘要：年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。自从谷歌提出后，就持续的获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家...

    用户84 评论0 收藏0

发表评论

登陆后可评论

0条评论

Codeing_ls

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<