怎样运用TypeScript和Webpack编写网页运用

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的模块加载器,能够直接在浏览器中运转。

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