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' 去引入所有的内容

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())      

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

在這個網址去搜尋，有的話就可以安裝相應的檔案子產品的名字。@types/...