关键词 vue typescript webpack
本文是为下一篇《3 分钟搞定 Vue + TypeScript 开发》文章做的知识铺垫，文章结尾提供完整的 github 示例代码库。
准备
已经掌握 vue 开发的情况下，想体验一下 TypeScript 开发 vue，可以通过以下过程配置一个脚手架。
1. 阅读 webpack 官网文档 https://www.webpackjs.com/
webpack 工作原理
入口起点 (entry points)
输出 (output)
模式 (mode)
loader
插件 (plugins)
配置 (configuration)
模块 (modules)
模块解析 (module resolution)
依赖图 (dependency graph)
manifest
构建目标 (targets)
模块热替换 (hot module replace)
2. 阅读 TypeScript 官网文档 https://www.tslang.cn/docs/ho…
脚手架搭建了解辅导教程部分
5 分钟上手 TypeScript
ASP.NET Core
Gulp
JavaScript 迁移
React & Webpack
3. 阅读 Vue 官网文档
vue 配置入门: https://cn.vuejs.org/v2/guide…
开始配置
npm < 5.x 建议升级到更高版本 (当前稳定版本 6.7.0), 或使用 yarn 来管理包
配置文件
完成准备工作后下面就要进行这 3 类文件的配置
package.json
webpack.config.js
tsconfig.json
配置思路，渐进式配置避免过程中问题堆积，先让脚手架工作起来
首先要让 webpack 能运行起来
安装 Vue 框架, 配置 Vue、TS 编译所需的 loader 和 plugins
让 webpack 运行起来
这是一个使 webpack 能工作的最小配置。
当写好一个 webpack 配置, 从最简单的一步开始感受一下 webpack, 建立亲切感往后就容易多了。
webpack 配置文件:
/**
* @file ./config/webpack.config.js
* @author CharlesYu01
*/
module.exports = {
entry: ‘./index.ts’,
mode: ‘production’
};
编译执行结果：
$ webpack –config ./config/webpack.config.js
Hash: 067221c5690968574418
Version: webpack 4.29.0
Time: 86ms
Built at: 2019-01-26 14:05:49
Asset Size Chunks Chunk Names
main.js 930 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./index.ts 0 bytes {0} [built]
可以看一下编译出来的内容，默认在./dist/main.js 中。
ps：恩，你已经掌握了 webpack 最核心的玩法了，处理更复杂的工作时再去了解 loader、plugins 的原理。
用 Vue+TS 编写一个可浏览的页面
安装插件
// package.json
// TODO: 掌握各插件的作用
…
“devDependencies”: {
“awesome-typescript-loader”: “^5.2.1”,
“html-webpack-plugin”: “^3.2.0”,
“source-map-loader”: “^0.2.4”,
“ts-loader”: “^5.3.3”,
“typescript”: “^3.2.4”,
“vue-class-component”: “^6.3.2”,
“vue-loader”: “^15.6.1”,
“vue-tsx-support”: “^2.2.2”,
“webpack”: “^4.29.0”,
“webpack-cli”: “^3.2.1”,
“webpack-dev-server”: “^3.1.14”
},
“dependencies”: {
“vue”: “^2.5.22”,
“vue-property-decorator”: “^7.3.0″
}
…
webpack 安装时如有异常，使用官网推荐方法 yarn add webpack –dev
添加 html 入口文件有了编译产出的 js，还需要将 js 引入到页面中，此时使用 webpack plugins 配置一个插件 html-webpack-plugin，就可以完成 html 页面引入 js 的功能。
添加 vue template 的编译能力 vue-loader
引用 vue 官网：
运行时 + 编译器 vs. 只包含运行时
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：
new Vue({template: ‘<div>{{ hi}}</div>’})// 不需要编译器 new Vue({render (h) {
return h(‘div’, this.hi)
}})// 配置 webpack.config.jsmodule.exports = {resolve: { alias: {
‘vue$’: ‘vue/dist/vue.esm.js’
}
}}
添加一个可预览的 webServer webpack-dev-server
devServer: {
contentBase: ‘../dist’,
port: 9000
}
#### 验证结果
1. 用 TypeScript 实现一个 Input 组件 /example/vue-tsx/Input.tsx
import {VNode} from ‘vue/types’;
import Component from ‘vue-class-component’;
import * as Vue from ‘vue-tsx-support’;
import {Prop} from ‘vue-property-decorator’;
export interface InputProps {
placeholder: String
}
@Component
export default class Input extends Vue.Component<InputProps,any> {
[x: string]: any;
text: any;
input(e) {
this.text = e.target.value
this.$emit(‘input’, e.target.value);
}
@Prop([String, Boolean]) value: string | boolean | undefined;
data() {
return {
text: ”
}
}
render() {
return <input value={this.value} onInput={this.input}/>
}
}
2. 引用组件
new Vue({
template: ‘<div> 组件 <Input value=”” @input=”input”/>{{message}}</div> ‘,
data:{
message:’hello Vue!’
},
methods:{
input:function(e) {
this.message = e.target.value;
}
}
}).$mount(‘#app’);
3. 预览
// 可以全量安装一次项目依赖
yarn install
yarn start
$ webpack-dev-server –config ./config/webpack.config.js
ℹ ｢wds｣: Project is running at http://localhost:9000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ../dist
ℹ ｢wdm｣: Hash: 9bf165f80a4d3c7600c0
Version: webpack 4.29.0
Time: 2129ms
Built at: 2019-01-26 19:49:49
Asset Size Chunks Chunk Names
./index.html 409 bytes [emitted]
main.js 662 KiB main [emitted] main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:9000 ./example/index.ts 40 bytes {main} [built]
[./example/index.ts] 471 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/events/events.js] 13.3 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/vue/dist/vue.esm.js] 289 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
+ 15 hidden modules
Child html-webpack-plugin for “index.html”:
1 asset
Entrypoint undefined = ./index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./example/index.html] 618 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.
效果
示例代码：
https://github.com/CharlesYu0…
TODO:
后续增加更多 webpack 构建示例
基于 vue cli3.0 开发一套适合多种项目结构使用的插件化 vue 脚手架（预计 19 年 7 月份）