webpack指南(五)TypeScript
将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的更多相关文章
- Swift语言指南(五)--数字字面量和数字类型转换
原文:Swift语言指南(五)--数字字面量和数字类型转换 数字字面量 整数字面量写法如下: · 十进制数,无前缀 · 二进制数,以 0b 为前缀 · 八进制数,以 0o 为前缀 · 十六进制数,以 ...
- webpack中使用typescript
概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...
- App架构师实践指南五之性能优化二
App架构师实践指南五之性能优化二 2018年07月30日 13:08:44 nicolelili1 阅读数:214 从UI和CPU方面来说App流畅体验优化,核心为流畅度/卡顿性能优化. 1.基 ...
- webpack to package typescript & scss
Demo2操作手册 本Demo演示如何配合各种loader进行稍复杂的使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpa ...
- 转:Webpack 指南(整理 草稿)
基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...
- Webpack指南(一):安装,创建项目,配置文件,开发环境以及问题汇总
Webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gra ...
- 教你使用Webpack搭建环境 TypeScript (2)
一. 环境搭建1.1. TypeScript环境安装已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git在上一个章节中我们说过,T ...
- 从零配置webpack(react+less+typescript+mobx)
本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...
- C++11 并发指南五(std::condition_variable 详解)
前面三讲<C++11 并发指南二(std::thread 详解)>,<C++11 并发指南三(std::mutex 详解)>分别介绍了 std::thread,std::mut ...
随机推荐
- 基于NFS共享存储实现KVM虚拟机动态迁移
基于NFS共享存储实现KVM虚拟机动态迁移 一:配置环境 二:安装相关的依赖包 三:实现NFS共享存储 四:KVM机配置相同的步骤 五:安装KVM01安装虚拟机 六:实现迁移 实验初始配置:所有主机 ...
- .NET Core+WebApi+EF访问数据新增用户数据
新建一个.NET Core项目,我使用的IDE是VS2019 依次创建三个Core类库:第一个命名api.Model,第二个api.Common,第三个api.Bo 解释一下这个三类库的作用: 第一个 ...
- 有向图强连通分量SCC(全网最好理解)
定义: 在有向图中,如果一些顶点中任意两个顶点都能互相到达(间接或直接),那么这些顶点就构成了一个强连通分量,如果一个顶点没有出度,即它不能到达其他任何顶点,那么该顶点自己就是一个强连通分量. 做题的 ...
- nginx判定国家ip访问网站
我们可以通过GeoIP模块和MaxMind免费数据库来实现.MaxMind具有新版本的数据库GeoLite2,它仅支持CSV和mmdb格式.可以支持mngx_http_geoip2_modulemdb ...
- 转载acm几何基础(2)
判断两条线段是否相交: 矢量 如果一条线段的端点是有次序之分的话,那么这种线段就称为 有向线段,如果有向线段p1p2的起点p1在坐标的原点,则可以把它称为矢量p2 矢量的加减 设二维矢量 P = (x ...
- Java——Java泛型
该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 一.泛型概述 1.定 ...
- 使用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 ...
- 软路由OpenWrt(LEDE)2020.5.10更新 UPnP+NAS+多拨+网盘+DNS优化
近期更新:2020.05.10更新-基于OpenWrt R2020.5.9版本,源码截止2020.05.10. 交流群:QQ 1030484865 电报 t.me/t_homelede 版本说 ...
- CSS躬行记(10)——CSS方法论
方法论是一个哲学术语,会对一系列具体的方法进行分析研究.系统总结并最终提出较为一般性的原则.CSS方法论是一种面向CSS.由个人和组织设计.已被诸多项目检验且公认有效的最佳实践.这些方法论都会涉及结构 ...
- 就没有我遇不到的报错!java.lang.NoClassDefFoundError: org/apache/hadoop/hbase/filter/Filter
本来准备用HBase的Bulkload将HDFS的HFile文件导入到HBase的myuser2表中,用的是yarn jar的命令 yarn jar /export/servers/hbase-1.2 ...