一步步使用 webpack 第五篇：使用 webpack 編譯 TypeScript 代碼
前言
上一篇文章中，使用 webpack 完成了 vue 代碼的編譯 。接下來在 vue 單文件組件的基礎上，將 js 升級爲 ts ，使用 webpack 編譯 TypeScript 代碼。css
版本說明
本文使用的 webpack 的版本爲：4.30.0html
開始搭建
本文的目的是：完成 .ts 文件以及 vue 單文件頁面中 TypeScript 代碼的編譯。vue
安裝 loader
使用命令行安裝 TypeScript ，以及 TypeScript 的 loader：node
$ cnpm install typescript ts-loader --save-dev
複製代碼
安裝 vue 官方插件
$ cnpm i vue-class-component vue-property-decorator --save-dev
複製代碼
後面編譯的時候提示須要安裝 vue-template-compiler 組件：webpack
$ cnpm i vue-template-compiler --save-dev
複製代碼
此時 package.json 文件內容以下：git
{
"name": "webpack_vue_ts",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.4.3",
"typescript": "^3.4.5",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-loader": "^15.7.0",
"vue-property-decorator": "^8.1.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
}
}
複製代碼
在 webpack 中配置 ts 的處理規則
在 webpack.config.js 文件中添加 ts 文件的處理規則：es6
module.exports = {
resolve: {
// 將 `.ts` 添加爲一個可解析的擴展名。
extensions: ['.ts', '.js'],
},
module:{
rules:[
{
test: /\.ts$/, // 處理 ts 文件，以及 vue 文件中的 <script lang="ts">
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] }
},
]
},
};
複製代碼
此時，完整的 webpack.config.js 文件以下：github
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/js/index.ts', // 入口文件，此時入口文件改成 ts 文件，下文有說明
output:{
filename:'index.js?[hash]', // 添加哈希值，防止緩存
path:path.resolve(__dirname,'dist') // 輸出文件夾
},
resolve: {
// 將 `.ts` 添加爲一個可解析的擴展名。
extensions: ['.ts', '.js'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
},
plugins: [
new CleanWebpackPlugin(), // 清除舊資源
new HtmlWebpackPlugin({ // 動態生成 html 文件
template: './src/index.html',
}),
new VueLoaderPlugin(), // 這裏 vue 須要額外添加一個插件，將定義的 .js 、 .css 規則應用到 .vue 文件中
],
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] }
},
{
test: /\.css$/, // 處理 css 文件，以及 .vue 文件中的 <style>
use:[
'vue-style-loader',
'style-loader',
'css-loader',
'postcss-loader',
]
},
{
test:/\.(png|svg|jpg|gif)$/, // 管理圖片資源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 處理結果將保持原文件名，文件路徑後添加哈希值避免緩存
}
},
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/, // 管理文字資源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 處理結果將保持原文件名，文件路徑後添加哈希值避免緩存
}
}
]
},
{
test: /\.(mp3|wav|wma|ape|aac)$/i, // 管理文字資源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 處理結果將保持原文件名，文件路徑後添加哈希值避免緩存
}
}
]
},
{
test:/\.vue$/, // 處理 .vue 文件
loader: 'vue-loader'
},
]
},
};
複製代碼
配置 TypeScript
在文件目錄下新建 tsconfig.json，能夠按照 官網文檔 配置 ts 的編譯選項，目前配置以下：web
{
"compilerOptions": {
"target": "es5",
"experimentalDecorators": true,
"strict": true,
"module": "es2015",
"moduleResolution": "node"
}
}
複製代碼
添加 ts 依賴文件
在文件目錄下新建 project.d.ts 文件，並添加解析 .vue 的代碼：typescript
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
複製代碼
改寫入口 js 文件爲 ts 文件
將入口 js 文件 ./src/js/index.js 改成 ts 文件，./src/js/index.ts，而後在 index.ts 中使用 /// 引入依賴文件：
///<reference path="../../project.d.ts" />
複製代碼
目錄結構
此時個人文件目錄結構以下：
webpack-vue-ts
|- node_modules
|- /dist
|- /src
|- /assets
|- btn_longtap.png
|- /css
|- style.css
|- /js
|- index.ts
|- index.html
|- package.json
|- package-lock.json
|- postcss.config.js
|- project.d.ts
|- tsconfig.json
|- webpack.config.js
複製代碼
文件目錄說明：
./src/js/index.ts文件爲入口文件；./src文件夾爲編譯前文件夾，./dist文件夾爲編譯後的文件夾；
添加代碼
此時 ./src/js/index.ts 文件的完整代碼以下：
///<reference path="../../project.d.ts" />
import '../css/style.css';
import Vue from 'vue';
import App from './App.vue';
new Vue({
el:"#app",
template: '<App/>',
components:{
App
}
});
複製代碼
改寫 ./src/js/App.vue 文件， vue 裝飾器的使用規則能夠 點擊這裏查看，此時改寫完的 ./src/js/App.vue 文件內容以下：
<template>
<div class="app">
<p>{{str}}</p>
<img src="../assets/btn_longtap.png">
</div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Emit, Prop, } from 'vue-property-decorator';
@Component({})// 組件在此添加
export default class App extends Vue{
private str:string = 'success'; // data 定義
private mounted(){ // mounted
console.log(this.change); // 輸入 success
}
get change():string{ // computed
return this.str;
}
}
</script>
<style scoped>
$color_index : 1;
.app{
@if $color_index == 1{
color: red;
}@else{
color: blue;
}
}
</style>
複製代碼
編譯程序
運行命令行
$ npm run build
複製代碼
此時頁面效果以下，說明 index.ts 以及 App.vue 文件中的 TypeScript 代碼被成功編譯：
總結
- 搭建
webpack、vue、TypeScript三者結合的配置仍是有些複雜。沒有在官方找到三者結合的完整指南，只能在各自的文檔中摘取部分配置信息； - 至此五篇文章已經使用 webpack 體驗了
es6、postcss、vue以及TypeScript等代碼的編譯，但僅做爲配置參考，要想做爲實際開發的工具，還須要根據 webpack 文檔優化 webpack 編譯； - 下一步，將優化 webpack 的編譯過程或者優化資源文件。
參考連接
- ts-loader 文檔：github.com/TypeStrong/…
- vue-loader 文檔-使用預處理器：vue-loader.vuejs.org/zh/guide/pr…
- typescrip tsconfig.json 配置：www.tslang.cn/docs/handbo…
- webpack loaders 文檔：webpack.docschina.org/loaders/
- webpack typescrpt 指南：www.webpackjs.com/guides/type…
- vue-property-decorator 文檔：github.com/kaorun343/v…
- vue typescript 支持：cn.vuejs.org/v2/guide/ty…
更多文章
- 查看 網易創意部 其餘小夥伴的文章：github.com/f2e-netease…
- 查看個人更多文章：github.com/NalvyBoo/bl…
相關文章
- 1. 一步步使用 webpack 第四篇：使用 webpack 編譯 vue 代碼
- 2. 一步步使用 webpack 第一篇：使用 webpack 編譯 es6 代碼
- 3. 一步步使用 webpack 第二篇：使用 webpack 編譯 PostCSS 代碼
- 4. Webpack初步使用
- 5. webpack初步使用
- 6. 一步步使用 webpack 第三篇：使用 webpack 管理圖片等資源文件
- 7. 使用webpack+babel來"編譯"JS代碼
- 8. 428 webpack 使用步驟
- 9. 使用webpack詳細步驟
- 10. webpack基礎使用步驟筆記（一）
- 更多相關文章...
- • Kotlin 使用命令行編譯 - Kotlin 教程
- • TortoiseSVN 使用教程 - SVN 教程
- • Composer 安裝與使用
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章