评论

Webpack学习《接入Typescript》

TypeScript | 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript

TypeScript  | 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

传统调试TypeScript

Typescript 代码需要通过构建将它转换成 JavaScript 代码后才能运行。

// show .ts 为 show 函数增加类型检查
export function show (content : string) {
  console.log('Hello ,' + content)
}
// main.ts 通过 ES6 模块规范导如 show 函数
import {show) from './show '; 
// 执行 show 函数
show ('Webpack '); 

我们需要在当前项目的根目录下新建一个用于配置编译选项的 tsconfig.json 文件,编译器默认会读取和使用这个文件,配置文件的内容大致如下: 

通过 npm install -g typescript 安装编译器到全局后,可以通过 tsc main. ts 命令编译 器到全局后,可以通过 tsc main. ts 命令编译

集成 Webpack 

  1. 通过 Loader TypeScript 转换成 JavaScript
  2. Webpack 在寻找模块对应的文件时需要尝试 ts 后缀。
  3. 在运行构建前 npm i -D typescript awesome-typescript-loader 

配置如下:

const path = require('path')
module.exports = {
  entry: './main',
  output: {
    filename: 'bundle.js',
    path: path.resolve(_dirname,'./dist')
  },
  resolve: {
    // 先尝试以 ts 为后缀的 Typescript 源码文件
    extensions : [ '.ts', '.js']
  },
  module: {
    rules: [
      {
        test : /\.ts$/, loader: 'awesome-typescript-loader' 
      }
    ]
  },
  devtool:'so urce-map'//  输出 ur ce Map 以方便在浏览器里调试 Types cript 代码
}


总结

由于对webpack比较感兴趣, 所以看了一些资料 《深入浅出Webpack.pdf--吴浩麟》后,决定打包配置引入TypeScript,小试一把。


点赞 9
收藏
评论
登录 后发表内容