一個可以WebPack打包的TS學習環境(前端)

2019-04-19

一個沒有營養的文章,如果需要一個前端的TS項目方案倒是可以看看

所用到的

  • yarn:需要提前配置源,替代 npm 管理依賴;
  • nvm:管理nodejs版本;
  • typescript、tslint:需要 npm 安裝全局;

搭建過程

初始化

1
$ yarn init

過程結束生成 package.json 項目的基本配置

1
2
3
4
5
6
{
"name": "ts-basic-env",
"version": "1.0.0",
"main": "src/index.js",
"license": "MIT"
}

組織目錄

  • build:打包相關配置,例如 WebPack 配置
  • src :項目目錄
    • api:接口可複用方法
    • assets:靜態文件
      • img
      • font
    • config:配置文件(抽離出來)
    • tools:業務無關的工具函數
    • utils:業務相關的可複用方法
  • typings:TS模塊聲明文件

安裝依賴

全局安裝TS

1
$ sudo npm install typescript tslint -g

安裝後可用命令

1
$ tsc

項目目錄初始化TS

1
$ tsc --init

可見目錄中產生 tsconfig.json 文件,ts在1.8版本后json文件中可以有注釋

安裝WebPack 及所需依賴

webpack4 不需要大量的配置了

項目目錄中執行:

1
$ yarn add webpack webpack-cli webpack-dev-server ts-loader cross-env clean-webpack-plugin html-webpack-plugin typescript -D
  • webpack
  • Webpack-cli
  • Webpack-dev-server
  • ts-loader:ts加載器
  • cross-env:環境變量配置
  • clean-webpack-plugin:webpack清理插件
  • html-webpack-plugin:html模板插件
  • typescript

即可安裝開發環境的 webpack,然後需要用在build文件夾下創建webpack配置文件

webpack.config.js ,因為webpack是node環境下的,是在編譯時運行的,所以需要加載一套配置文件來可以自定義編譯過程。

以下是 webpack的相關配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
//↑引入插件

module.exports = {
entry: "./src/index.ts", //webpack編譯入口
output: {
filename: "main.js", //輸出的文件名稱
},
resolve: {
extensions: ['.ts', '.js', '.tsx'] //支持後綴(import / require默認加載)
},
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}]
},
devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
devServer: { //webpack開發調試服務器配置
contentBase: './dist',
stats: 'errors-only',
compress: false,
host: 'localhost',
port: 9019,
},
plugins: [ //設置插件
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./dist']
}),
new HtmlWebpackPlugin({
template: './src/template/index.html'
})
]
}

然後 package.json 更新:添加開發啟動和編譯命令

詳見:scripts 部分的 startbuild

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name": "ts-basic-env",
"version": "1.0.0",
"main": "./src/index.js",
"license": "MIT",
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
},
"devDependencies": {
"clean-webpack-plugin": "^2.0.1",
"cross-env": "^5.2.0",
"html-webpack-plugin": "^3.2.0",
"ts-loader": "^5.3.3",
"typescript": "^3.4.4",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
}
}

這裡使用cross-env來配置NODE_ENV,在webpack.config.js告知 devtool 當前環境是生產環節還是開發環境

devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map'

另外配置完之後別忘了在 .src/ 目錄中創建配置文件設置的 entry也就是 index.ts文件

最後嘗試啟動一下,一個初級的ts前端環境就搭建好了~

1
2
3
4
5
6
7
8
9
$ yarn start
yarn run v1.6.0
(node:27524) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
$ cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js
ℹ 「wds」: Project is running at http://localhost:9019/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from ./dist
ℹ 「wdm」:
ℹ 「wdm」: Compiled successfully.

Comments: