Typescript + TSLint + webpack 搭建 Typescript 的开发环境
生活随笔
收集整理的這篇文章主要介紹了
Typescript + TSLint + webpack 搭建 Typescript 的开发环境
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
（1）初始化項目 新建一個文件夾“client-side”，作為項目根目錄，進入這個文件夾： 我們先使用 npm 初始化這個項目： 這時我們看到了在根目錄下已經創建了一個 package.json 文件，接下來我們創建幾個文件夾： npm install -g tslint mkdir client-side cd client-side # 使用npm默認package.json配置 npm init -y # 或者使用交互式自行配置，遇到選項如果直接敲回車即使用括號內的值 npm init package name: (client-side) # 可敲回車即使用client-side這個名字，也可輸入其他項目名 version: (1.0.0) # 版本號，默認1.0.0 description: # 項目描述，默認為空 entry point: (index.js) # 入口文件，我們這里改為./src/index.ts test command: # 測試指令，默認為空 git repository: # git倉庫地址，默認為空 keywords: # 項目關鍵詞，多個關鍵詞用逗號隔開，我們這里寫typescript,client,lison author: # 項目作者，這里寫lison<lison16new@163.com> license: (ISC) # 項目使用的協議，默認是ISC，我這里使用MIT協議 # 最后會列出所有配置的項以及值，如果沒問題，敲回車即可。src：用來存放項目的開發資源，在 src 下創建如下文件夾： utils：和業務相關的可復用方法 tools：和業務無關的純工具函數 assets：圖片字體等靜態資源 api：可復用的接口請求方法 config：配置文件 src 的同級目錄： typings：模塊聲明文件 build：webpack 構建配置 接下來我們在全局安裝 typescript ，全局安裝后，你就可以在任意文件夾使用tsc命令： 如果全局安裝失敗，多數都是權限問題，要以管理員權限運行。 安裝成功后我們進入項目根目錄，使用typescript進行初始化： 注意：運行的指令是tsc，不是typescript。 這時你會發現在項目根目錄多了一個 tsconfig.json 文件，里面有很多內容。而且你可能會奇怪，json 文件里怎么可 以使用 // 和 /**/ 注釋，這個是 TS 在 1.8 版本支持的，我們后面課程講重要更新的時候會講到。 tsconfig.json 里默認有 4 項沒有注釋的配置，有一個需要提前講下，就是"lib"這個配置項，他是一個數組，他用來 配置需要引入的聲明庫文件，我們后面會用到ES6語法，和DOM相關內容，所以我們需要引入兩個聲明庫文件，需 要在這個數組中添加"es6"和"dom"，也就是修改數組為 [“dom”, “es6”] ，其他暫時不用修改，接著往下進行。 然后我們還需要在項目里安裝一下typescript，因為我們要搭配使用webpack進行編譯和本地開發，不是使用tsc指 令，所以要在項目安裝一下： （2））配配置置TSLint 接下來我們接入TSLint，如果你對代碼的風格統一有要求，就需要用到TSLint了，另外TSLint會給你在很多地方起 到提示作用，所以還是建議加入的。接下來我們來接入它。 首先需要在全局安裝TSLint，記著要用管理員身份運行： 然后在我們的項目根目錄下，使用TSLint初始化我們的配置文件： npm install typescript -g tsc --init npm install typescript npm install tslint -g tslint -i運行結束之后，你會發現項目根目錄下多了一個 tslint.json 文件，這個就是TSLint的配置文件了，它會根據這個 文件對我們的代碼進行檢查，生成的tslint.json文件有下面幾個字段： defaultSeverity是提醒級別，如果為error則會報錯，如果為warning則會警告，如果設為off則關閉，那TSLint就關 閉了； extends可指定繼承指定的預設配置規則； jsRules用來配置對 .js 和 .jsx 文件的校驗，配置規則的方法和下面的rules一樣； rules是重點了，我們要讓TSLint根據怎樣的規則來檢查代碼，都是在這個里面配置，比如當我們不允許代碼中使 用 eval 方法時，就要在這里配置 "no-eval": true ； rulesDirectory可以指定規則配置文件，這里指定相對路徑。 以上就是我們初始化的時候TSLint生成的tslint.json文件初始字段，如果你發現你生成的文件和這里看到的不一樣， 可能是TSLint版本升級導致的，你可以參照TSLint配置說明了解他們的用途。如果你想要查看某條規則的配置及詳 情，可以參照TSLint規則說明。 （3））配配置置webpack 接下來我們要搭配使用 webpack 進行項目的開發和打包，先來安裝 webpack、webpack-cli 和 webpack-dev- server： 我們將它們安裝在項目中，并且作為開發依賴(-D)安裝。接下來添加一個 webpack 配置文件，放在 build 文件夾 下，我們給這個文件起名 webpack.config.js，然后在 package.json 里指定啟動命令： 這里我們用到一個插件"cross-env"，并且后面跟著一個參數 NODE_ENV=development，這個用來在 webpack.config.js 里通過 process.env.NODE_ENV 來獲取當前是開發還是生產環境，這個插件要安裝： 緊接著我們要在 webpack.config.js 中書寫配置： { "defaultSeverity": "error", "extends": [ "tslint:recommended" ], "jsRules": {}, "rules": {}, "rulesDirectory": [] } npm install webpack webpack-cli webpack-dev-server -D { "scripts": { "start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js" } } npm install cross-envconst HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { // 指定入口文件 // 這里我們在src文件夾下創建一個index.ts entry: "./src/index.ts", // 指定輸出文件名 output: { filename: "main.js" }, resolve: { // 自動解析一下拓展，當我們要引入src/index.ts的時候，只需要寫src/index即可 // 后面我們講TS模塊解析的時候，寫src也可以 extensions: [".tsx", ".ts", ".js"] }, module: { // 配置以.ts/.tsx結尾的文件都用ts-loader解析 // 這里我們用到ts-loader，所以要安裝一下 // npm install ts-loader -D rules: [ { test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ } ] }, // 指定編譯后是否生成source-map，這里判斷如果是生產打包環境則不生產source-map devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map", // 這里使用webpack-dev-server，進行本地開發調試 devServer: { contentBase: "./dist", stats: "errors-only", compress: false, host: "localhost", port: 8089 }, // 這里用到兩個插件，所以首先我們要記著安裝 // npm install html-webpack-plugin clean-webpack-plugin -D plugins: [ // 這里在編譯之前先刪除dist文件夾 new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["./dist"] }), // 這里我們指定編譯需要用模板，模板文件是./src/template/index.html，所以接下來我們要創建一個index.html文件 new HtmlWebpackPlugin({ template: "./src/template/index.html" }) ] }; 這里我們用到了兩個webpack插件，第一個 clean-webpack-plugin 插件用于刪除某個文件夾，我們編譯項目的時 候需要重新清掉上次打包生成的dist文件夾，然后進行重新編譯，所以需要用到這個插件將上次打包的dist文件夾清 掉。 第二個 html-webpack-plugin 插件用于指定編譯的模板，這里我們指定模板為 "./src/template/index.html" 文 件，打包時會根據此html文件生成頁面入口文件。 接下來我們創建這個 index.html 模板：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>TS-Learning</title> </head> <body></body> </html> 現在我們運行如下命令來啟動本地服務： npm run start 我們看到啟動成功了，接下來我們在 index.ts 文件里寫一點邏輯： // index.ts let a: number = 123; const h1 = document.createElement("h1"); h1.innerHTML = "Hello, I am Lison"; document.body.appendChild(h1); 當我們保存代碼的時候，開發服務器重新編譯了代碼，并且我們的瀏覽器也更新了。 我們再來配置一下打包命令，在 package.json 的 scripts 里增加 build 指令： { "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config ./build/webpack.config.js", "build": "cross-env NODE_ENV=production webpack --mode=production --config ./build/webpack.config.js" } } 同樣通過 cross-env NODE_ENV=production 傳入參數。現在我們運行如下命令即可執行打包： npm run build 現在我們前端項目的搭建就大功告成了， 啟動本地服務成功： index.ts let a: number = 123;
const h1 = document.createElement("h1");
h1.innerHTML = "Hello, I am Lison";
document.body.appendChild(h1);
index.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>TS-Learning</title> </head><body></body></html>package.json
{"name": "client-side1","version": "1.0.0","description": "","main": "./src/index.ts","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js","build": "cross-env NODE_ENV=production webpack --mode=production --config ./build/webpack.config.js"},"author": "zxw","license": "ISC","dependencies": {"cross-env": "^5.2.0","typescript": "^3.5.3"},"devDependencies": {"clean-webpack-plugin": "^3.0.0","html-webpack-plugin": "^3.2.0","ts-loader": "^6.0.4","webpack": "^4.39.1","webpack-cli": "^3.3.6","webpack-dev-server": "^3.7.2"} }?
webpack.config.js
?
const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = {// 指定入口文件 // 這里我們在src文件夾下創建一個index.ts entry: "./src/index.ts", // 指定輸出文件名 output: { filename: "main.js" },resolve: {// 自動解析一下拓展，當我們要引入src/index.ts的時候，只需要寫src/index即可// 后面我們講TS模塊解析的時候，寫src也可以 extensions: [".tsx", ".ts", ".js"]},module: {// 配置以.ts/.tsx結尾的文件都用ts-loader解析 // 這里我們用到ts-loader，所以要安裝一下 // npm install ts-loader -D rules: [{ test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ }]},// 指定編譯后是否生成source-map，這里判斷如果是生產打包環境則不生產source-map devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map", // 這里使用webpack-dev-server，進行本地開發調試 devServer: { contentBase: "./dist", stats: "errors-only", compress: false, host: "localhost", port: 8089 },// 這里用到兩個插件，所以首先我們要記著安裝 // npm install html-webpack-plugin clean-webpack-plugin -D plugins: [// 這里在編譯之前先刪除dist文件夾 new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["./dist"] }),// 這里我們指定編譯需要用模板，模板文件是./src/template/index.html，所以接下來我們要創建一個index.html文件 new HtmlWebpackPlugin({ template: "./src/template/index.html" })]};項目的總體目錄：
?
?
倉庫：
https://gitee.com/guangzhou110/lingjichuxuetoutypescript.git?
轉載于:https://www.cnblogs.com/guangzhou11/p/11302830.html
總結
以上是生活随笔為你收集整理的Typescript + TSLint + webpack 搭建 Typescript 的开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 理解Promise (3)
- 下一篇： 八个JS中你见过的类型。