TypeScript安裝以及基礎的編譯與tsconfig.json配置
以及webpack.config.js文件配置
一、typeScript安裝以及基礎編譯
npm i -g typescript
安裝完，進入ts文件的項目目錄下，在命令行執行 tsc hello.ts（hello.ts是ts文件，執行這個命令可以把ts文件編譯為hello.js文件）
這個命令，ts文件里的代碼每改變一次，需要執行一次。如果要實時編譯 需要 
上面這種方法，只是針對單個文件。如果我們需要對批量的ts文件，進行實時編譯，那么我們就需要在根目錄下創建一個tsconfig.js文件
tsconfig里面即使僅有個{}，我們在項目根目錄執行tsc -w 也會自動編譯項目下所有的ts文件；
下面是tsconfig相關的一些配置
二、ts的tsconfig.json配置文件
// npm init -y 對項目進行初始化，在項目下生成package.json
// npm i -D webpack webpack-cli typescript ts-loader 可以生成node_modules
// npm i -D html-webpack-plugin
// tsc -w
// npm i -D webpack-dev-server 內置服務器，自動刷新
// npm i -D clean-webpack-plugin
// npm i -D @babel/core @babel/preset-env babel-loader core-js 適配不同的瀏覽器
// npm i -D postcss postcss-loader postcss-preset-env
{
// include代表需要編譯哪些文件；路徑：兩個**,代表當前文件下的所有目錄，一個*代表當前文件夾下的所有文件
"include": [
"./src/**/*"
],
// 不需要被編譯的文件
"exclude": [
"./src/hello/**/*"
],
// 定義被繼承得配置文件
// "extends":"",
// 需要編譯的文件，一個一個放這里;
// "files": [
// ],
// 編譯器的選項
"compilerOptions": {
// 用來指定ts被編譯的ES的版本 "target":"esnext"這是最新版本
"target": "ES6",
// 指定要使用的模塊化規范
// "module": "es2015",
// "module":"CommonJS"
"module": "system",
// 用來指定項目中用到的庫
"lib": [
"DOM",
"ES6"
],
// 用來指定編譯后文件所在的目錄,編譯后的文件放在哪
"outDir": "./dist",
// 所有全局作用域中的代碼合並為一個文件，如果要使用模塊化，必須這么設置模塊化"module":"system"
"outFile": "./dist/app.js",
// 是否對js文件進行編譯，默認是false
"allowJs": true,
// 檢查js代碼是否符合邏輯規范，默認是false
"checkJs": true,
//是否移除注釋
"removeComments": true,
// 不生成編譯后的文件,只是執行過程，只是檢查語法
"noEmit": false,
//當有錯誤的時候不生成編譯后的文件
"noEmitOnError": true,
//所有嚴格檢查的總開關
"strict": false,
// 用來設置編譯后的文件，是否采用嚴格模式
"alwaysStrict": true,
// 不允許出現隱式的any類型
"noImplicitAny": true,
// 不允許出現隱式的this
"noImplicitThis": true,
// 嚴格的檢查空值 例：div不存在，在獲取dom的時候
"strictNullChecks": true,
}
}
三、webpack.confis.js文件配置
// 引入一個包
const path = require("path");
// 引入html文件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack中的所有配置信息，都應該寫在這里
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目錄
output:{
// 指定打包文件的目錄
path:path.resolve(__dirname,'dist'),
// 打包后文件的文件名
filename:"bundle.js",
// 告訴webpack不適用箭頭
environment:{
arrowFunction:false
}
},
//指定webpack打包時要是用的模塊
module:{
// 指定要加載的規則
"rules":[
{
// test指定的是規則生效的文件
test:/\.ts$/,
//要使用的loader
use:[
// 配置babel
{
// 指定加載器
loader: "babel-loader",
// 設置babel
options: {
// 設置預定義的環境
presets:[
[
// 指定環境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目標瀏覽器
targets:{
"chrome":"88",
},
// 指定corejs版本
"corejs":"3",
// 使用corejs的方式 按需加載
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude:/node-modules/
},
// 設置less文件的處理
{
test:/\.less$/,
use:[//從下往上執行
"style-loader",
"css-loader",
// 引入postcss配置
{
loader:"postcss-loader",
options:{
postcssOptions:{
plugins:[
"postcss-preset-env",
{
browsers:'last 2 versions'
}
]
}
}
},
"less-loader"
]
}
]
},
// 配置webpack插件
plugins:[
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title:"這是一個自定義的title"
template:'./src/index.html'
})
],
// 用來設置那些后綴名可以設置引用模塊
resolve:{
extensions:['.ts','.js']
}
}
四、在package.json中加入一句話
我們就可以用命令npm run build 去執行我們的webpack，用webpack對我們的項目進行打包。
（需要認真看兩個配置文件，這兩個配置文件只是匯總）
npm run build
如有疑問請加群討論 854184700
