webpack中typeScript的打包配置

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呢

https://microsoft.github.io/TypeSearch/

在這個網址去搜索，有的話就可以安裝相應的文件模塊的名字。 @types/...