全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typescriptConfig
 

1. TS: js的超集 tslang.cn/typescriptlang.org
2. typesscript-loader 有两个
ts-loader 官方维护
awesome-typesctipt-loader 个人维护,运用了缓存,速度更快
3. 配置在 tsconfig.json 文件中
官网中: 官网/docs/handbook/compiler-options.html 查看相关具体配置
常用选项:
compilerOptions
include
exculde
4. 安装环境
sudo npm install typescript -g
npm install webpack typescript ts-loader awesome-typescript-loader --save-dev
在我安装依赖的时候出现 项目中 typesctipt 下载失败的情况,此时因为全局安装有 typescript ,可以直接链接过来,使用命令
npm link typescript
5. 配置webpack.config.js文件
module.exports = {
mode: 'development',
entry: {
'app': './src/app.ts'
},
output: {
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader'
}
}
]
},
devtool: 'source-map',
}
 
6. 配置tsconfig.json配置文件(注意json文件不可以写注释,请自行去掉注释)
{
"compilerOptions": {
// 包含es6 es7 和commonjs
"module": "commonjs",
// 目标运行环境
"target": "es5",
// 是不是允许 js语法
"allowJs": true,
},
"include": [
"./src/*"
],
"exclude": [
"./node_modules"
]
}
7. 使用第三方库的声明文件(校验第三方库文件的数据类型)
npm install @types/lodash
npm install @types/vue
。。。。
或者使用 Typings
a.全局安装 sodu npm install typings -g
b.使用typings 安装 typings install lodash --save 安装完成后会自动生成 typings.json 配置文件和 typings 文件夹
c.在tsconfig.json文件中添加 typeRoots 配置
 
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"allowJs": true,
"typeRoots": [
"./node_modules/@types",
"./typings/modules"
]
},
"include": [
"./src/*"
],
"exclude": [
"./node_modules"
]
}

  

webpack4 自学笔记二(typescript的配置)的更多相关文章

  1. redis相关笔记(二.集群配置及使用)

    redis笔记一 redis笔记二 redis笔记三 1.配置:在原redis-sentinel文件夹中添加{8337,8338,8339,8340}文件夹,且复制原8333中的配置 在上述8333配 ...

  2. webpack4 自学笔记一(babel的配置)

    所有代码都可以再我的github上查看,每个文件夹下都会有README.md,欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree ...

  3. webpack4 自学笔记三(提取公用代码)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...

  4. Spring4学习笔记二:Bean配置与注入相关

    一:Bean的配置形式 基于XML配置:在src目录下创建 applicationContext.xml  文件,在其中进行配置. 基于注解配置:在创建bean类时,通过注解来注入内容.(这个不好,因 ...

  5. webpack4 自学笔记四(style-loader)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/css 引入- ...

  6. Webpack4 学习笔记六 多页面配置和devtool

    webpack 多页配置 webpack可以配置单页应用, 也可以配置多页应用. 区别在于, 单页应用entry入口只有一个, 而多页应用入口有多个 webpack配置: const path = r ...

  7. Webpack4 学习笔记二 CSS模块转换

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...

  8. webpack4 自学笔记五(tree-shaking)

    全部的代码及笔记都可以在我的github上查看, 欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/ThreeS ...

  9. Hadoop自学笔记(五)配置分布式Hadoop环境

    上一课讲了怎样在一台机器上建立Hadoop环境.我们仅仅配置了一个NHName Node, 这个Name Node里面包括了我们全部Hadoop的东西.包括Name Node, Secondary N ...

随机推荐

  1. ORM操作mysql

    创建表和添加数据 import sqlalchemyfrom sqlalchemy import create_enginefrom sqlalchemy.ext.declarative import ...

  2. [auto-download-app] 如何使用 javascript 实现 app 自动下载

    // 在访客跳转进入的页面中,执行下面使用下面 invoke function (function(){ var str_downloadUrl = "<!--{$apkUrl}--& ...

  3. UNIGUI集成HTML导航

    UNIGUI集成HTML导航 先来一个效果图: ajaxRequest(MainForm.window,'openform',[]); procedure TMainForm.UniFormAjaxE ...

  4. Excel VBA语句集

    Excel VBA语句集 引子 最近批阅学生成绩,用Excel 处理学生成绩,用到VBA 提高办公效率.需要经常查阅VBA的一些用法 正文 定制模块行为 (1) Option Explicit '强制 ...

  5. 数独 php

      数独求解程序 php版 转载请注明出处:http://xiezhenye.com/2008/06/%e6%95%b0%e7%8b%ac%e6%b1%82%e8%a7%a3%e7%a8%8b%e5% ...

  6. asp.net 增加404页面(非302、200)

    由于项目改版,导致产生了许多死链,但是之前的404页面都是在Application_Error中Response.Redicet()到404页面,但是这样子是302跳转,导致搜索引擎认为网页不是死链而 ...

  7. WPF自定义控件开发实例 - ColorPicker

    开发环境:Win10 + VS2017 + .Net4.5 这个 ColorPicker 是<<WPF编程宝典:使用C#2012和.NET4.5>>这本书中的例子.这里我记录一 ...

  8. 预处理命令使用详解----#if、#endif、#undef、#ifdef、#else、#elif

    预处理命令 在接触#if.#undef这类预处理指令前,大部分都都接触过#define.#include等预处理命令,通俗来讲预处理命令的作用就是在编译和链接之前,对源文件进行一些文本方面的操作,比如 ...

  9. Unity LuaFramework LuaBundleMode

    设置 AppConst.cs 中的 LuaBundleMode 为 true,开启 Lua 代码 AssetBundle 模式. 启动程序报错,Moudle XXX not found. 我在 Ass ...

  10. Mac下通过 brew 安装 Apache 和 PHP

    Mac 自带的是php5.6 ,这里讲一下如果要升级到php7.1需要做的. 1.安装brew https://brew.sh/(官网有提供安装命令 建议使用) ruby -e "$(cur ...