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有什麼好處

一、Greeter裏面必須傳一個字符串的內容，但假設傳遞123。在代碼裏就會報錯。使用ts後，代碼就更嚴謹了。就可使咱們的代碼有效的避免一些錯誤。 更嚴謹規範的寫代碼。

二、我安裝了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的時候，在寫代碼的時候就會報錯，從而更快的發現問題。

三、我怎麼知道哪些庫有對應的ts,types呢

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

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