webpack4之ts配置

发表于 | 分类于


配置

注意： TypeScript 不会做 Polyfill，例如从 es6 编译到 es5，TypeScript 编译后不会处理 es6 的那些新增的对象的方法，如果需要 polyfill 需要自行处理！

听说ts配置
官方ts配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# npm i -D webpack webpack-cli ts-loader typescript
# npm i -g ts-node // ts-node demo.ts可以执行ts文件里的代码并输出到命令行

// tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node", // 按照node的规则去找文件
    "target": "es5", // 编译的目标语言
    "module":"es2015", // 编译生什么样的模块系统, 比如amd, umd, commonJs，方法库使用umd
    "lib": ["es2015", "es2016", "es2017", "dom", "ScriptHost"], // 编译过程中需要引入的库文件的列表,比如用到了document.createElment就要用dom，window.location就用到了ScriptHost
    "strict": true, // 开启所有严格的类型检查
    "sourceMap": true,
    "declaration": true, // 打包生成声明文件，这样引入的时候可以校验
    "noImplicitAny": false, // 不允许隐式的any类型
    "allowSyntheticDefaultImports": true, // 允许引入没有默认导出的模块
    "allowUmdGlobalAccess": true, // 允许html引入umd库，ts不用再import全局的变量了，比如jquery
    "esModuleINterop": true, // 允许esModule和CommonJs混用，少用
    "experimentalDecorators": true, // 允许注释语法
    "emitDecoratorMetadata": true,
    "declarationDir": "dist/types", // 打包生成声明文件的路径
    "outDir": "dist/lib", // 指定输出目录
    "typeRoots": [ // 声明文件目录，默认node_modules/@types
      "node_modules/@types"
    ]
  },
  "include": [
    "src"
  ],
  "exclude": [
    "**/*.spec.ts"
  ]
}

// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

// index.ts
class Greeter {
  greeting: string
  constructor (message: string) {
    this.greeting = message
  }
  greet () {
    return 'hello,' + this.greeting
  }
}

let greeter = new Greeter('world')
let button = document.createElement('button')
button.textContent = 'say hello'
button.onclick = function () {
  alert(greeter.greet())
}

document.body.append(button)
``` 

##### ts安装依赖包
> 按照正常的安装依赖包，引入依赖的时候不会有类型判断，所以需要再安装一个依赖包对应的typescript的类型文件

// 判断该依赖包是否有ts的类型文件
// github搜索types，找到DefinitelyTyped项目，打开官网：http://definitelytyped.org/，有使用方法和搜索功能，可以搜索该依赖包是否有类型文件
// npm install –save-dev @types/lodash

// index.ts
import * as from ‘lodash’
console.log(111, .join([1,2], ‘-‘))
```