先上最終代碼
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/_ts-loader@8.0.2@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/中搜索這個第三方模塊是否有類型說明文件。
結束