文章目錄
- 一、安裝 node
- 二、搭建簡單ts環境
- 三、Webapck + TypeScript
- 3.1 初始化準備
- 3.2 安裝相關依賴
- 3.3 配置 webpack.config.js
- 3.4 一切準備就緒，測驗你的 TS 檔案
- 3.6 npm run serve
- 3.5 npm run build
- 3.6 目錄結構
一、安裝 node
直接去官網下載安裝就行了，雙擊安裝 (不會這都還需要教吧-.-)
國內官網鏈接：http://nodejs.cn/download/
二、搭建簡單ts環境
注：搭建的該環境適用于在終端除錯單個js檔案等簡單操作
// 安裝typescript環境
npm install typescript -g
npm install ts-node -g
//另外ts-node需要依賴 tslib 和 @types/node 兩個包
npm install tslib @types/node -g
接下來你就可以在終端使用命令運行你的ts檔案了：
ts-node 檔案名稱 即可運行指定ts檔案
hellowrold.ts
console.log("Hello World!");
三、Webapck + TypeScript
3.1 初始化準備
新建一個檔案夾，命名ts-demo
進入該檔案夾
npm init -y 初始化一個 package.json檔案
tsc --init 初始化一個TypeScrpt組態檔
如果報：tsc 不是xxx的話，你需要全域安裝TypeScript
輸入命令npm install typescript -g安裝
接下來在 ts-demo中會有如下兩個檔案,如果沒有的話，請檢查上述步驟是否執行成功
- package.json
- tsconfig.json
新建一個index.html檔案，后續在npm run serve的時候會以該檔案為模板(通過 HtmlWebpackPlugin 的template屬性指定模板)，自動引入打包好的TS代碼，
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3.2 安裝相關依賴
npm i webpack webpack-cli -D // webpack 相關
npm i typescript ts-loader -D // ts 相關
npm i webpack-dev-server -D //開發服務器
npm i html-webpack-plugin -D //用于指定模板檔案
3.3 配置 webpack.config.js
在 ts-demo檔案目錄下新建一個檔案webpack.config.js,并填入以下內容:
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// mode: "development", // 看自己情況選擇
mode: "production", // 看自己情況選擇
entry: "./src/main.ts", // 入口檔案
output: {
path: path.resolve(__dirname, "./dist"), // 打包后的檔案位置
filename: "bundle.js", // 打包后的檔案名稱
},
module: {
rules: [
{
test: /\.ts$/,
loader: "ts-loader",
},
],
},
resolve: {
// 自動決議擴展名
extensions: [".js", ".json", ".ts", ".vue"],
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html", // 指定 html 模板檔案
}),
],
};
3.4 一切準備就緒，測驗你的 TS 檔案
接下來我們測驗一下是否能夠成功編譯TS檔案，
首先配置一下腳本,在package.json檔案的scripts中，進行如下配置：
"scripts": {
"serve": "webpack serve --open",
"build": "webpack"
},
接下來在 ts-demo檔案夾下新建一個src檔案夾，并在該檔案夾下新建檔案main.ts
在 main.ts中嘗試輸出一下資訊：
main.ts
const message: string = "Hello World!";
console.log(message);
3.6 npm run serve
接下來在 根目錄打開控制臺，并輸入 npm run serve，則會打開一個開發服務器，你在更改檔案的時候，瀏覽器會同步更新，方便除錯，
3.5 npm run build
執行：npm run build
不出意外的話，檔案將會被正常打包到 dist/bundle.js檔案中，
3.6 目錄結構
├── dist
| └── bundle.js
├── src
| ├── main.ts
├── node_modules
├── ...
├── index.html
├── tsconfig.json
├── package.json
├── package-lock.json
└── webpack.config.js
大概配置就到這里，其他的后續補充，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305223.html
標籤：其他
上一篇：購物車內容渲染-案例 axios