内容简介:上一篇文章中,本文使用的 webpack 的版本为:本文的目的是:完成
上一篇文章中, 使用 webpack 完成了 vue 代码的编译 。接下来在 vue 单文件组件的基础上,将 js
升级为 ts
,使用 webpack 编译 TypeScript 代码。
版本说明
本文使用的 webpack 的版本为: 4.30.0
开始搭建
本文的目的是:完成 .ts
文件以及 vue 单文件页面中 TypeScript
代码的编译。
安装 loader
使用命令行安装 TypeScript ,以及 TypeScript 的 loader:
$ cnpm install typescript ts-loader --save-dev 复制代码
安装 vue 官方插件
$ cnpm i vue-class-component vue-property-decorator --save-dev 复制代码
后面编译的时候提示需要安装 vue-template-compiler
组件:
$ cnpm i vue-template-compiler --save-dev 复制代码
此时 package.json
文件内容如下:
{ "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 文件的处理规则:
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
文件如下:
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 的编译选项,目前配置如下:
{ "compilerOptions": { "target": "es5", "experimentalDecorators": true, "strict": true, "module": "es2015", "moduleResolution": "node" } } 复制代码
添加 ts 依赖文件
在文件目录下新建 project.d.ts
文件,并添加解析 .vue
的代码:
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
代码被成功编译:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 使用源码编译Hadoop
- 使用 Docker 进行交叉编译
- go使用之-编译约束
- 使用 Visual Studio 编译时,让错误一开始发生时就停止编译(以便及早排查编译错误节省时间)
- 一步步使用 webpack 第二篇:使用 webpack 编译 PostCSS 代码
- 一步步使用 webpack 第四篇:使用 webpack 编译 vue 代码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。