将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. 基于NFS共享存储实现KVM虚拟机动态迁移

    基于NFS共享存储实现KVM虚拟机动态迁移 一:配置环境 二:安装相关的依赖包 三:实现NFS共享存储 四:KVM机配置相同的步骤 五:安装KVM01安装虚拟机 六:实现迁移  实验初始配置:所有主机 ...

  2. .NET Core+WebApi+EF访问数据新增用户数据

    新建一个.NET Core项目,我使用的IDE是VS2019 依次创建三个Core类库:第一个命名api.Model,第二个api.Common,第三个api.Bo 解释一下这个三类库的作用: 第一个 ...

  3. 有向图强连通分量SCC(全网最好理解)

    定义: 在有向图中,如果一些顶点中任意两个顶点都能互相到达(间接或直接),那么这些顶点就构成了一个强连通分量,如果一个顶点没有出度,即它不能到达其他任何顶点,那么该顶点自己就是一个强连通分量. 做题的 ...

  4. nginx判定国家ip访问网站

    我们可以通过GeoIP模块和MaxMind免费数据库来实现.MaxMind具有新版本的数据库GeoLite2,它仅支持CSV和mmdb格式.可以支持mngx_http_geoip2_modulemdb ...

  5. 转载acm几何基础(2)

    判断两条线段是否相交: 矢量 如果一条线段的端点是有次序之分的话,那么这种线段就称为 有向线段,如果有向线段p1p2的起点p1在坐标的原点,则可以把它称为矢量p2 矢量的加减 设二维矢量 P = (x ...

  6. Java——Java泛型

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 一.泛型概述 1.定 ...

  7. 使用kubeadm部署k8s集群[v1.18.0]

    使用kubeadm部署k8s集群 环境 IP地址 主机名 节点 10.0.0.63 k8s-master1 master1 10.0.0.63 k8s-master2 master2 10.0.0.6 ...

  8. 软路由OpenWrt(LEDE)2020.5.10更新 UPnP+NAS+多拨+网盘+DNS优化

    近期更新:2020.05.10更新-基于OpenWrt R2020.5.9版本,源码截止2020.05.10.   交流群:QQ 1030484865 电报 t.me/t_homelede   版本说 ...

  9. CSS躬行记(10)——CSS方法论

    方法论是一个哲学术语,会对一系列具体的方法进行分析研究.系统总结并最终提出较为一般性的原则.CSS方法论是一种面向CSS.由个人和组织设计.已被诸多项目检验且公认有效的最佳实践.这些方法论都会涉及结构 ...

  10. 就没有我遇不到的报错!java.lang.NoClassDefFoundError: org/apache/hadoop/hbase/filter/Filter

    本来准备用HBase的Bulkload将HDFS的HFile文件导入到HBase的myuser2表中,用的是yarn jar的命令 yarn jar /export/servers/hbase-1.2 ...