将webpack与TS进行集成。

1. 安装TypeScript 编译器和 loader

npm install --save-dev typescript ts-loader

2. 在package.json同级目录下新建tsconfig.json

{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
  "sourceMap": true, // 启用SourceMap功能
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}

3. 修改webpack.common.js

module.exports = {
+ entry: {
+ app: './src/index.ts'
+ },
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules:[
+ {
+ test:/\.tsx?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/
}
]
},
+ resolve:{
+ extensions:['.ts', '.tsx', '.js']
+ },
}

ts-loader 在这里使用它可以方便地启用额外的webpack功能,例如将额外的web资源导入项目。

4. 三方库的使用

index.ts

// 此处导入必须写成import as, 否则会报错
import * as _ from 'lodash'; function component() {
var element = document.createElement('div'); element.innerHTML = _.join(['hello','webpack'],' '); return element; } document.body.appendChild(component());

当ts文件中使用 npm 安装第三方库时,一定要同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。

如:lodash

npm install --save-dev @types/lodash

5. 非代码文件的使用

创建 custom.d.ts 文件,用来编写自定义的类型声明。同样的理念适用于其他资源,包括 CSS, SCSS, JSON 等。

.svg 文件进行声明设置:

declare module "*.svg" {
const content: any;
export default content;
}

通过指定任何以 .svg 结尾的导入,将模块的 content 定义为 any,将 SVG 声明一个新的模块。我们可以通过将类型定义为字符串,来更加显式地将它声明为一个 url。

webpack指南(五)TypeScript的更多相关文章

  1. Swift语言指南(五)--数字字面量和数字类型转换

    原文:Swift语言指南(五)--数字字面量和数字类型转换 数字字面量 整数字面量写法如下: · 十进制数,无前缀 · 二进制数,以 0b 为前缀 · 八进制数,以 0o 为前缀 · 十六进制数,以 ...

  2. webpack中使用typescript

    概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...

  3. App架构师实践指南五之性能优化二

    App架构师实践指南五之性能优化二 2018年07月30日 13:08:44 nicolelili1 阅读数:214   从UI和CPU方面来说App流畅体验优化,核心为流畅度/卡顿性能优化. 1.基 ...

  4. webpack to package typescript & scss

    Demo2操作手册 本Demo演示如何配合各种loader进行稍复杂的使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpa ...

  5. 转:Webpack 指南(整理 草稿)

    基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...

  6. Webpack指南(一):安装,创建项目,配置文件,开发环境以及问题汇总

    Webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gra ...

  7. 教你使用Webpack搭建环境 TypeScript (2)

      一. 环境搭建1.1. TypeScript环境安装已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git在上一个章节中我们说过,T ...

  8. 从零配置webpack(react+less+typescript+mobx)

    本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...

  9. C++11 并发指南五(std::condition_variable 详解)

    前面三讲<C++11 并发指南二(std::thread 详解)>,<C++11 并发指南三(std::mutex 详解)>分别介绍了 std::thread,std::mut ...

随机推荐

  1. 一个令人兴奋的ES6星特性-结构赋值

    学完了前4节,今天我给大家带来的是一个令人兴奋的特性:解构赋值.这个章节代码片段有点偏多,不过可以放心,一点都不烧脑,还是老样子:简单易懂. 什么是解构赋值 按照一贯的套路,接下来的内容是解释:什么是 ...

  2. JavaScript和php数组的定义

    JavaScript: var arr=[值1,值2,值3];                     //隐式创建 var arr=new Array(值1,值2,值3);      //直接实例化 ...

  3. influxdb 安装

    influxdb是一款开源的时序数据库,可以用作监控系统的数据存储或用来存储基于时序进行分析的业务系统的数据存储. influxdb的部署及使用均比较简单,但是集群(官方版集群已闭源)及高可用方案较少 ...

  4. Docker镜像与仓库(四)

    Dockerfile方式创建镜像 https://hub.docker.com/_/centos/ #找一个centos6.6 的dockerfile链接 [root@linux-node1 ~]# ...

  5. Lambda表达式最佳实践

    简介 Lambda表达式java 8引入的函数式编程框架.之前的文章中我们也讲过Lambda表达式的基本用法. 本文将会在之前的文章基础上更加详细的讲解Lambda表达式在实际应用中的最佳实践经验. ...

  6. zabbix自动监控钉钉报警

    钉钉报警 一:设置钉钉机器人  二:zabbix服务器server端配置 1.修改zabbix_server.conf文件 [root@server ~]# vim /usr/local/zabbix ...

  7. 基于Apache+Tomcat实现负载均衡

    1.基于Apache和tomcat实现负载均衡 准备三个虚拟机一个安装Apache两个安装Tomcat 关闭防火墙 systemctl stop firewalld Iptabled -F Seten ...

  8. 使用3种协议搭建yum仓库

    制作本地yum仓库 开启服务一般要关闭防火墙,selinux之后再reboot ## 方案一:FTP协议------ftp://IP 下载vsftpd---启动vsftpd---ftp://10.0. ...

  9. Django入门3:视图views

    1.获取用户请求数据 1.1 request.GET 获取request.method='GET'的数据 request.GET.get('name',None) 1.2 request.POST 获 ...

  10. Excel中拆分列

    常常在linux下我们写个shell,结果输出至txt中需要把数据一条一条的抠出来,也是很累人的事情,而直接输出值excel中的话相对较简单,但是会集中在第一列.这时候也不用担心,在Excel中选择第 ...