一步步使用 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介绍与使用
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章