• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

webpack中typeScript的打包配置

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
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/...

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typeScript中的数据类型发布时间:2022-07-18
下一篇:
TypeScript Number发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap