用TypeScript构建Webpack+Vue项目

前言

都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适配项目

bb

这是我在掘金的第一篇文章, 欢迎各位大佬交流和指正

如何用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仓库的小星星star一发

开箱即用的TypeScript + Webpack项目

github.com/atbulbs/all…

开箱即用的TypeScript + Webpack + Vue项目

github.com/atbulbs/all…

开箱即用的TypeScript + Webpack + Vue + H5开发VW适配项目, 参考大漠老师的移动端px自动转换vw方案

github.com/atbulbs/all…