Open felix-cao opened 6 years ago
TypeScript 是一种由微软开发的自由和开源的编程语言, 代码在 GitHub 上托管。TypeScript 是 JavaScript 的一个超集,扩展了 JavaScript 的语法,所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。TypeScript 为我们提供了可选的静态类型检查和ES6新特性。
TypeScript 是为大型应用程序开发而设计的, 它的第一个版本发布于 2012 年 10 月,经历了多次更新后,现在已成为前端社区中不可忽视的力量,不仅在 Microsoft 内部得到广泛运用,Angular, React, Vue这些开源框架都在广泛的使用。本篇主要聊一聊利用 Webpack 去处理 TypeScript 程序。
在 Webpack入门一:模块化中我们知道 Webpack 是一个 module bundler, 在 Webpack入门四:loader使用中我们知道 Webpack 本身只能处理 JavaScript 模块,对于css格式的文件我们使用css-loader去读取它,那么对于 TypeScript 规范的语言标准是不是有 ts-loader 去处理呢?没错, TypeScript 的 loader有两种:
Github上的 Awesome TypeScript loader for webpack 有关于 ts-loader和awesome-typescript-loader之间的区别精彩的解释.
接上一篇的代码, 在这里使用 TypeScript 需要干四件事
$ npm i typescript awesome-typescript-loader -D
tsconfig.json
{ "compilerOptions": { "baseUrl": "./app", "module": "commonjs", "noEmitOnError": true, "noUnusedLocals": true, "noUnusedParameters": true, "preserveConstEnums": true, "removeComments": false, "sourceMap": true, "strictNullChecks": true, "target": "ES5" } }
关于这个配置文件可以阅读 TypeScript 官方的文档
配置 webpack.config.js
const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './main.ts', output: { path: __dirname + '/dist', // 将输出放到dist文件夹 filename: 'app-[hash].js' }, devServer: { contentBase: './dist', host: '127.0.0.1', port: 8080, inline: true, compress: false }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader'], // 转换 .css 文件需要使用的 Loader }), }, { test: /\.ts$/, use: ['awesome-typescript-loader'], } ] }, plugins: [ new webpack.BannerPlugin('版权所有,翻版必究'), new HtmlWebpackPlugin({ template: __dirname + "/index.html" //new 一个这个插件的实例,并传入相关的参数 }), new ExtractTextPlugin({ filename: `[name]_[contenthash:8].css` // 从 .js 文件中提取出来的 .css 文件的名称 }), ], }
下面来改造一下文件目录结构,新建app文件夹,将下列文件移入app文件夹
module.ts (原来的module.js使用的是CommonJS的模块化规范,这里我们改为ES6自己的模块规范语法)
function add(x: number, y: number) { return x + y; } function setName(name: string) { return name; } export {add, setName};
main.ts (同module.ts一样, 原来的main.js使用的是CommonJS的模块化规范,这里我们改为ES6自己的模块规范语法)
import './main.css' // 载入 main.css import * as mdl from './module' document.write('这里是入口<br/><br/>'); var person = { age: mdl.add(10, 20), getName: mdl.setName('Felix Cao') }; document.write(`姓名: ${person.getName}<br>`); document.write(`年龄: ${person.age}`);
需要额外提一下的是,如果继续想使用CommonJS的require模块加载方法的话,需要额外安装第三方库node去识别require.
$ npm i @types/node
本实例源码
TypeScript 是一种由微软开发的自由和开源的编程语言, 代码在 GitHub 上托管。TypeScript 是 JavaScript 的一个超集,扩展了 JavaScript 的语法,所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。TypeScript 为我们提供了可选的静态类型检查和ES6新特性。
TypeScript 是为大型应用程序开发而设计的, 它的第一个版本发布于 2012 年 10 月,经历了多次更新后,现在已成为前端社区中不可忽视的力量,不仅在 Microsoft 内部得到广泛运用,Angular, React, Vue这些开源框架都在广泛的使用。本篇主要聊一聊利用 Webpack 去处理 TypeScript 程序。
一、TypeScript Loader
在 Webpack入门一:模块化中我们知道 Webpack 是一个 module bundler, 在 Webpack入门四:loader使用中我们知道 Webpack 本身只能处理 JavaScript 模块,对于css格式的文件我们使用css-loader去读取它,那么对于 TypeScript 规范的语言标准是不是有 ts-loader 去处理呢?没错, TypeScript 的 loader有两种:
Github上的 Awesome TypeScript loader for webpack 有关于 ts-loader和awesome-typescript-loader之间的区别精彩的解释.
二、配置环境及文件目录改造
接上一篇的代码, 在这里使用 TypeScript 需要干四件事
tsconfig.json
关于这个配置文件可以阅读 TypeScript 官方的文档
配置 webpack.config.js
下面来改造一下文件目录结构,新建app文件夹,将下列文件移入app文件夹
module.ts (原来的module.js使用的是CommonJS的模块化规范,这里我们改为ES6自己的模块规范语法)
main.ts (同module.ts一样, 原来的main.js使用的是CommonJS的模块化规范,这里我们改为ES6自己的模块规范语法)
需要额外提一下的是,如果继续想使用CommonJS的require模块加载方法的话,需要额外安装第三方库node去识别require.
本实例源码
Reference