[前端工程化]用TS构建Webpack+Vue的All In TS项目

前言

都9102年了, 你还在用vue-cli一键生成项目吗, 都9102年了, 你还没有用过TypeScript吗

如果你使用过TypeScript, 一定会感慨开(ban)发(zhuan)体验真爽

但是, 如果你尝试过自己动手去构建一个TypeScript项目, 你可能会发现这里面会有很多的坑, 想要顺利出坑, 请记住Evan You大大的话

如果你问我为啥连Webpack都要用TypeScript去配置, 因为代码洁癖的职业病, 所以

阅读这篇文章, 你将收获

• 如何用TypeScript写Webpack配置
• 如何用TypeScript + Webpack构建Vue项目
• 开箱即用的TypeScript + Webpack项目
• 开箱即用的TypeScript + Webpack + Vue项目
• 开箱即用的TypeScript + Webpack + Vue + H5开发VW适配项目

如何用TypeScript写Webpack配置

1. 在Webpack官方文档找到对TypeScript配置语言的支持webpack.js.org/configurati…

2. 阅读官方文档, 该方案的原理是利用ts-node去运行Webpack

3. 安装项目需要的具有类型定义的依赖

$ npm i -D typescript ts-node @types/node @types/webpack @types/webpack-dev-server

4. 配置入口文件和打包出口

5. 配置tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

6. 让ts-node找到配置文件, 安装依赖后有两种方案

$ npm i -D tsconfig-paths

// 方案1: 添加npm scripts
// "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"

// 方案2: 利用package.json的config
"config": {
    "TS_NODE_PROJECT": "\"tsconfig-for-webpack-config.json\""
  },

7. 关于类型定义, 如开发环境的配置, Mac系统, 按住command键, 鼠标悬停至包名, 可单击查看Webpack源码里的命名空间

8. 跑起来试试

如何用TypeScript + Webpack构建Vue项目

1. 在vue-loader官方文档找到ts-loader预处理器的配置vue-loader.vuejs.org/zh/guide/pr…

npm i -D typescript ts-loader

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      }
    ]
  },
  // ...plugin omitted
}

2. vue-loaderV15需要配置Webpack插件才能正确使用 vue-loader.vuejs.org/migrating.h…

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

3. 查看Vue.js官方文档里对TypeScript的支持vuejs.org/v2/guide/ty…

4. 在项目src里添加vue-shims.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

5. 安装Vue对TypeScript支持的依赖

$ npm i -D vue-class-component vue-property-decorator

6. 愉快的玩耍起来吧

<template lang="pug">
  .hello {{ computedMsg }}
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class HelloComponent extends Vue {
    msg = ''

    mounted () {
      this.greet()
    }

    get computedMsg () {
      return 'Hello, ' + this.msg
    }

    greet () {
      this.msg = 'typeScirpt_webpack_vue !'
    }
  }
</script>

该项目代码仓库: github.com/atbulbs/all…