TypeScript + Webpack 4 開發環境搭建

時間 2019-12-19

標籤 typescript webpack 開發環境搭建简体版

原文原文鏈接

前段時間接觸到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板，生成的項目使用的默認語言是 TypeScript，雖然之前在此以前並無用過TypeScript，但第一看上去有種很熟悉的感受。固然，也有人說 TypeScript 是 JavaScript 版本的C#，無論怎麼說，有了學習的興趣。另外，聽說新版的webpack 4相比之前的版本的更快的打包速度，因而就有了把它們結合在一塊兒使用的想法。javascript

準備工做

請事先安裝好 Node.js
新建項目文件夾，按住 Shift 鍵不放手，在文件夾空白處單擊鼠標右鍵，選擇 在此處打開Powershell窗口html

使用npm 安裝相應的模塊

webpack 4 須要安裝 webpack、webpack-cli 和 typescript 等必要的模塊。爲了使用 webpack 處理 typescript，還須要 ts-loader。
在上面打開的 Powershell 窗口中輸入如下命令java

一、初始化項目：node

npm init

回答一系列的問題（也能夠直接回車使用默認值）後，在當前項目文件夾中會出現一個package.json的配置文件。文件內容大概以下所示：webpack

{
  "name": "webpacktypescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "ts-loader": "^4.2.0",
    "typescript": "^2.8.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

二、安裝須要的各個模塊：web

npm install webpack webpack-cli typescript ts-loader --save-dev

回答一系列的問題（也能夠直接回車使用默認值）後，在當前項目文件夾中會出現一個package.json的配置文件。文件內容大概以下所示：typescript

{
  "name": "webpacktypescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "ts-loader": "^4.2.0",
    "typescript": "^2.8.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

三、添加 TypeScript 的配置文件 tsconfig.jsonshell

啓動 WebStorm 並打開項目，在項目名稱上單擊鼠標右鍵 -> New -> tsconfig.json, 添加TypeScipt的配置文件，內容以下所示：npm

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

四、添加index.html及默認的 src/index.js文件
在項目文件夾中添加html文件，並命名爲：'index.html',並編輯文件內容以下所示：json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TypeScript + Webpack 4</title>
</head>
<body>

<script src="dist/main.js"></script>
</body>
</html>

在項目文件夾中添加名字爲src的文件夾，並在該文件夾中添加名字爲index.js的JavaScript文件,文件內容以下所示：

console.log("Hello TypeScript!");

完成以上操做後項目的結構以下所示：

webpackwithtypescript
  |- src
    |- index.js
  |- index.html
  |- package.json
  |- package-lock.json
  |- tsconfig.json

五、使用webpack-cli打包項目

在控制檯窗口(Powershell窗口 或WebStorm的Terminal 均可以) 輸入如下命令進行打包：

npx webpack

控制檯顯示內容以下所示：

D:\SPAProjects\webpacktypescript>npx webpack
npx: installed 1 in 11.482s
The "path" argument must be of type string
D:\SPAProjects\webpacktypescript\node_modules\webpack\bin\webpack.js
Hash: 7dffdd50a425c0f906c2
Version: webpack 4.6.0
Time: 579ms
Built at: 2018-04-18 14:23:26
  Asset       Size  Chunks             Chunk Names
main.js  577 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 33 bytes {0} [built]

打包成功，項目文件夾中會多出 dist/main.js - 這也正是 webpack 4 未指定輸出文件時默認的位置。此時在瀏覽器中打開index.html，並在瀏覽器中按下F12，進入控制檯將會看到 consolr.log() 語句的輸出結果。

此時的項目文件夾結構：

webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.js
    |- index.html
    |- package.json
    |- package-lock.json
    |- tsconfig.json

webpack 4 沒有配置文件時，使用src/index.js做爲默認入口，同時使用dist/main.js做爲默認出口。
因爲TyepScript文件的默認擴展名爲.ts，因此並不適合於沒有配置文件的默認情況。

六、webpack 配置文件
在項目文件夾中添加名爲webpack.config.js的JavaScript文件，並編輯其內容如如下所示：

const path = require('path');

module.exports = {
    mode: 'development',

    entry: './src/index.ts',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [{
            test: /\.ts$/,
            use: "ts-loader"
        }]
    },
    resolve: {
        extensions: [
            '.ts'
        ]
    }
};

同時修改package.json如如下內容所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "ts-loader": "^4.2.0",
    "typescript": "^2.8.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14"
  },
  "devDependencies": {},
  "scripts": {
    "build": "webpack",   //添加這一行
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

完成以上的設置，而後將src/index.js更名爲src/index.ts。

webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.ts
    |- index.html
    |- package.json
    |- package-lock.json
    |- tsconfig.json

使用npm run build命令編譯、打包src/index.ts文件：

D:\SPAProjects\webpacktypescript>npm run build

> webpacktypescript@1.0.0 build D:\SPAProjects\webpacktypescript
> webpack

Hash: 9bf0b33a5a6b242a917e
Version: webpack 4.6.0
Time: 1683ms
Built at: 2018-04-18 15:03:36
  Asset      Size  Chunks             Chunk Names
main.js  2.84 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.ts] 35 bytes {main} [built]

在控制檯窗口能夠輸入npm run build指令進行打包時，項目中src文件夾中的ts文件index.ts被編譯，並輸出爲 dist/main.js。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。