typeScript的webpack配置
目錄
先上最終程式碼
webpack.config.js
const path = require('path'); module.exports = { mode: 'production', entry: './src/index.tsx', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ //表示node_modules中的tsx檔案不做處理 } ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"module": "es6",
"target": "es5",
"allowJs": true,
"allowSyntheticDefaultImports": true
}
}
package.json
{ "name": "ts_webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "zhangmiao", "license": "ISC", "devDependencies": { "ts-loader": "^8.0.2", "typescript": "^3.9.7", "webpack": "^4.44.1", "webpack-cli": "^3.3.12" }, "dependencies": { "@types/lodash": "^4.14.159", "lodash": "^4.17.19" } }
初始化
npm install -y
npm install webpack webpack-cli --save-dev
寫一段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.appendChild(button);
這段程式碼就是一個點選say hello按鈕，然後彈出hello world的小demo。
當然這段程式碼放在瀏覽器上肯定是無法直接執行的，所以我們需要將他進行打包。接下來就是配置webpack，使這段程式碼可以執行起來。
webpack配置
需要安裝的依賴
- ts-loader
- typescript
npm install ts-loader typescript --save-dev
程式碼
在package.json中配置打包命令
"scripts": {
"build":"webpack"
},
在webpack中配置：
const path=require('path');
module.exports={
mode:'production',
entry:'./src/index.tsx',
module:{
rules:[
{
test:/\.tsx?$/,
use:'ts-loader',
exclude:/node_modules/ //表示node_modules中的tsx檔案不做處理
}
]
},
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
}
}
其實要使用一種語法，不論是css,ts,less都是一樣的套路，引入對應的檔案，在module裡面配置對應的loader，一般就可以正常的打包了。
我們先來打包試一下npm run build
結果出現報錯：
Module build failed (from ./node_modules/[email protected]@ts-loader/index.js):
Error: error while parsing tsconfig.json
這段程式碼的解決辦法是在檔案的根目錄下建立一個tsconfig.json的檔案。
tsconfig.json配置
{
"compilerOptions":{
"outDir": "./dist",
"module": "es6",
"target": "es5",
"allowJs": true,
"allowSyntheticDefaultImports": true
}
}
這裡配置了一些常用的配置項
- outDir：當使用
loader打包tsx檔案時，打包檔案會放在這個配置項配置的目錄下。 - module：指的是我們使用的是ES module的方式引入
- target：這個指的是我們最終打包的時候，需要把typescript轉化為什麼樣的形式。寫es5可以打包成es5的語法,在大部分瀏覽器上都可以執行。
- allowJs：表示可以在ts的語法中引入js這樣的模組或檔案。
在tsx中使用js的模組引入方式
在tsx中，我們這樣引入react：
import * as React from 'react'
在js中我們這樣引入
import React,{Component, useState} from 'react'
allowSyntheticDefaultImports:true是為了使我們可以在tsx中像在js中一樣引入模組。當然，也可以不配置這一項，繼續使用tsx的引入方式即可。
我們再進行打包，npm run build。打包成功。
我們進入dist目錄下的bundle.js檔案，複製裡面的js，到瀏覽器的控制檯中執行，可以檢測一下是否出錯。
使用第三方模組
比如我們現在使用lodash，npm install lodash --save。
import _ from 'lodash'
class Greeter{
greeting:string;
constructor(message:string){
this.greeting=message;
}
greet(){
return _.join(["Hello,",this.greeting],'');
// 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.appendChild(button);
return _.join(["Hello,",this.greeting],'');這樣寫是沒有什麼問題的，就做了一個字串拼接。但是當我們在_.join中什麼不寫或者使用一些有問題的寫法的時候:return _.join();。這時你會發現它沒有報錯也沒有提示。這和ts優秀的靜態檢查是相違背的，我們希望它能將第三方模組的語法也能一併檢查了。方法是引入第三方模組的型別說明檔案，比如：
npm install @types/lodash --save--dev
我們可以在https://microsoft.github.io/TypeSearch/中搜索這個第三方模組是否有型別說明檔案。
結束