教你使用webpack打包編譯TypeScript代碼
TypeScript打包
webpack整合
通常情況下，實際開發(fā)中我們都需要使用構建工具對代碼進行打包；
TS同樣也可以結合構建工具一起使用，下邊以webpack為例介紹一下如何結合構建工具使用TS；
步驟如下：
初始化項目
進入項目根目錄，執(zhí)行命令 npm init -y，創(chuàng)建package.json文件
下載構建工具
命令如下：
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
共安裝了7個包:
- webpack：構建工具webpack
- webpack-cli：webpack的命令行工具
- webpack-dev-server：webpack的開發(fā)服務器
- typescript：ts編譯器
- ts-loader：ts加載器，用于在webpack中編譯ts文件
- html-webpack-plugin：webpack中html插件，用來自動創(chuàng)建html文件
- clean-webpack-plugin：webpack中的清除插件，每次構建都會先清除目錄
配置webpack
根目錄下創(chuàng)建webpack的配置文件webpack.config.js：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
optimization:{
minimize: false // 關閉代碼壓縮，可選
},
entry: "./src/index.ts",
devtool: "inline-source-map",
devServer: {
contentBase: './dist'
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment: {
arrowFunction: false // 關閉webpack的箭頭函數(shù)，可選
}
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
use: {
loader: "ts-loader"
},
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:'TS測試'
}),
]
}
配置TS編譯選項
根目錄下創(chuàng)建tsconfig.json，配置可以根據自己需要
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}
修改package.json配置
修改package.json添加如下配置
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
...
}
項目使用
在src下創(chuàng)建ts文件，并在并命令行執(zhí)行npm run build對代碼進行編譯；
或者執(zhí)行npm start來啟動開發(fā)服務器；
Babel
除了webpack，開發(fā)中還經常需要結合babel來對代碼進行轉換；
以使其可以兼容到更多的瀏覽器，在上述步驟的基礎上，通過以下步驟再將babel引入到項目中；
雖然TS在編譯時也支持代碼轉換，但是只支持簡單的代碼轉換；
對于例如：Promise等ES6特性，TS無法直接轉換，這時還要用到babel來做轉換；
安裝依賴包：
npm i -D @babel/core @babel/preset-env babel-loader core-js
共安裝了4個包，分別是：
- @babel/core：babel的核心工具
- @babel/preset-env：babel的預定義環(huán)境
- @babel-loader：babel在webpack中的加載器
- core-js：core-js用來使老版本的瀏覽器支持新版ES語法
修改webpack.config.js配置文件
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader",
options:{
presets: [
[
"@babel/preset-env",
{
"targets":{
"chrome": "58",
"ie": "11"
},
"corejs":"3",
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
如此一來，使用ts編譯后的文件將會再次被babel處理；
使得代碼可以在大部分瀏覽器中直接使用；
同時可以在配置選項的targets中指定要兼容的瀏覽器版本；
到此這篇關于使用webpack打包編譯TypeScript代碼的文章就介紹到這了,更多相關webpack打包編譯TypeScript內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JavaScript事件冒泡機制原理實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
CSS+Js圖片切換技術，類似的已有不少了，這一個使用了遮罩過渡的效果，同樣應用到了TAB選項卡上，本頁面僅是為了演示，大家用時候把它拆分開來，這個效果也對學習圖片效果制作很有幫助。2009-11-11
本篇文章主要是對JS判斷對象是否存在的10種方法進行了總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之分頁,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
在做交友中心的頁面的時候，有一個javascript函數(shù)，它的第二個參數(shù)是動態(tài)的。2008-12-12
這篇文章主要介紹了JS動態(tài)加載當前時間的方法,涉及html的onload方法及javascript操作時間的技巧,需要的朋友可以參考下2015-02-02
本篇文章主要介紹了Redux實現(xiàn)組合計數(shù)器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
以前在網上都看到過類似的功能，不過沒自己想要實現(xiàn)過，這次剛好做靜態(tài)頁面中有這樣的一個需求，就試著自己做做看，做完發(fā)現(xiàn)也不是什么很難的事情。2008-10-10
本篇文章通過JS來實現(xiàn)以下日常用經常用到的計算以及換算等小工具，有興趣的朋友可以學習下。2018-02-02
這篇文章主要為大家詳細介紹了小程序實現(xiàn)篩子抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05