2018年typescript发展的非常好,js是一门非常灵活的语言,所以一个功能,怎么写都能够写出来,但是这也会导致一个问题,不同人写js的方式不同,那么会导致同一个功能出现的代码风格会迥然不同。这样的话,如果是一个团队在做编程的过程中,每个人都按自己的语法去写代码的话,那么维护性就难以得到保证。
 
typescript是微软推出的一个产品,他规范了一套javascript的语法,当然他也支持原始的javascript语法。通过typescript最大的优势就是可以规范我们的代码。
 
同时typescript因为把我们的代码做了规范,也可以方便的对代码进行报错,提示。所以我们代码写的不规范,会及时的提示给我们。所以总体来说,用typescript来编写我们的代码。可以有效的提升我们js的可维护性。

这也是为什么越来越多的公司开始采用typescript的原因,如果使用typescript,对应打包的webpack配置就会有所差异。所以我们看看webpack怎么对typescript进行打包支持。新建一个项目, 初始化package.json,安装webpack。typescript的后缀是index.tsx

index.tsx
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
} let greeter = new Greeter("world"); alert(greeter.greet())
这段代码是官网的例子http://www.typescriptlang.org/play/index.html。这段代码直接在浏览器里是运行不起来的。需要通过编译,webpack进行配置
安装 npm install ts-loader typescript --save-dev
webpack.config.js
const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.tsx',
  module: {
    rules: [{
      test: /\.tsx?$/,
      // ts-loader是官方提供的处理tsx的文件
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

package.json

"scripts": {
  "build": "webpack"
},

运行npm run build。这样是否打包成功了,打包试试,发现报错了,如下

提示说缺少一个tsconfig.json文件。

tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist", // 这块写不写都可以,webpack.config.js里面已经配置了output
    "module": "es6", // 指的是用的es module的引入方式
    "target": "es5", // 指的是打包成es5代码
    "allowJs": true, // 允许tsx引入js文件
  }
}

配置好之后,再运行npm run build。发现打包成功了,出现了dist,bundle.js。这个时候将bundle.js复制到控制太,能弹出hello world。说明打包生成的文件没有任何问题。

用typescript有什么好处
1、Greeter里面必须传一个字符串的内容,但假设传递123。在代码里就会报错。使用ts后,代码就更严谨了。就可以使我们的代码有效的避免一些错误。更严谨规范的写代码。
2、我安装了lodash。在tsx里面import _ from 'lodash';发现报错了,我们需要安装lodash对应的ts类型文件。
npm install @types/lodash --save-dev
意思是去ts里面使用lodash。这个时候在tsx里面提示不能直接引入。ts里面去引入需要 import * as _ from 'lodash' 去引入所有的内容
index.tsx
import * as _ from 'lodash';

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return _.join(['Hello,',this.greeting], '');
  }
} let greeter = new Greeter('world'); alert(greeter.greet())

所以在写ts的时候,在写代码的时候就会报错,从而更快的发现问题。

3、我怎么知道哪些库有对应的ts,types呢

在这个网址去搜索,有的话就可以安装相应的文件模块的名字。@types/...

webpack中typeScript的打包配置的更多相关文章

  1. webpack中的图片打包之路

    最近在Github上弄项目,需要搭建一个webpack开发环境.Emmm,是的,从0开始搭建一个项目确实不容易,光Webpack的坑就够我踩一路的了.这不,刚搭建到“图片打包”这里,就遇到了麻烦.最后 ...

  2. vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...

  3. webpack + typescript + babel打包*.min.js文件的环境配置

    将多个*.ts文件打包成一个*.min.js文件的开发配置 1.初始化 npm init 新建以下文件目录: 2.安装依赖: "devDependencies": { " ...

  4. 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...

  5. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  6. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  7. webpack中使用typescript

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

  8. 【转】webpack中关于source map的配置

    Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...

  9. Vue+webpack项目的多环境打包配置

    背景:由于需要将应用部署到线上开发环境.线上测试环境.线上预发环境.线上生产环境,而每个环境的访问地址是不同的.如果每次更改请求地址未免有些繁琐,就考虑在本地进行一次性配置. 代码管理工具:git 代 ...

随机推荐

  1. Docker Machine(十五)

    目录 一.Docker Machine 总览 1.Docker Engine VS Docker Machine 2.环境准备 二.安装 Docker Machine 1.Install Machin ...

  2. conda换源

    装完Anaconda后,建议更新所有的包,因为以后使用很可能会报错. 而更新的时候conda的官方源在美国,不换源就非常蓝瘦,有生之年够呛了. 换源: conda config --add chann ...

  3. jquery判断元素是否包含某class

    // <div id="id" class="add on"></div> var flag = $("#id"). ...

  4. WCF-复杂配置

    两种模式,一个契约两个实现,两个契约一个实现. 服务类库 宿主 static void Main(string[] args) { ServiceHost sh1 = new ServiceHost( ...

  5. 【Pandas数据分析案例】2018年北京积分入户情况分析

    据说,北京落户的难度比加入美国国籍还高.而北京2018年首次实行积分入户制,让我们来分析一下首批通过积分入户拿到北京户口的数据. 首先从北京积分落户官网下载公示名单: 根据表格中的信息,我们主要从以下 ...

  6. 基于Task的多线程

    /// <summary> /// 基于Task的多线程 /// </summary> public class Tasks { public static void Task ...

  7. kubernetes核心组件kube-proxy

    一.  kube-proxy 和 service  kube-proxy是Kubernetes的核心组件,部署在每个Node节点上,它是实现Kubernetes Service的通信与负载均衡机制的重 ...

  8. ActiveMQ的静态网络配置

    static networkConnector是用于创建一个静态的配置对于网络中的多个Broker做集群,这种协议用于复合url,一个复合url包括多个url地址. <networkConnec ...

  9. WinRAR 去广告的姿势

    一直在使用WinRAR解压文件,感觉非常的好用,可是现在WinRAR添加了广告,每次打开压缩包都会弹出广告,有时候甚至在解压的时候弹出来,而每次弹出广告都会卡顿一下,忍了很长时间今天实在是受够了,准备 ...

  10. BZOJ4516 SDOI2016生成魔咒(后缀自动机)

    本质不同子串数量等于所有点的len-parent树上父亲的len的和.可以直接维护. #include<iostream> #include<cstdio> #include& ...