vue+webpack4+TypeScript

本文介绍了如何从0开始搭建一个vue+webpack4+typescript项目

github地址：https://github.com/seanffy/vue-webpack4-TypeScript

1、创建项目

使用vue init webpack project创建一个vue+webpack3+js的项目。

2、安装插件

将webpack、webpack-dev-server升级到最新版本，其次安装webpack-cli更新最新版本使用。
npm install webpack@latest —save-dev

3、配置开发环境

npm install加载依赖包，运行npm run dev会报错

此时我们需要更新html-webpack-plugin。再次运行会报eslint错误，关闭eslint规则，在webpack.base.conf.js把createLintingRule()去掉即可

重新运行

需要升级vue-loader，使用npm install vue-loader@latest —save-dev
升级完成之后再webpack.base.conf.js中添加

const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    mode : 'none', // 有development跟production、none三种情况，webpack4如果不设置打包完成会报错，如果有qa或者pl环境可以设置为none
    ***
    plugins: [
        new VueLoaderPlugin()
    ],
    ***
}

开发环境升级完成

4、配置生产环境

首先在prod环境中添加mode:’none’或者mode:’production’
用optimization代替以前的webpack.optimize.CommonsChunkPlugin、uglifyjs-webpack-plugin、webpack.optimize.ModuleConcatenationPlugin

const webpackConfig = merge(baseWebpackConfig, {
  // ...
  mode: 'production',
  // webpack4 内置
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendors',
        },
        'async-vendors': {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          name: 'async-vendors'
        }
      }
    },
    runtimeChunk: { name: 'runtime' }
  },
}

重新打包，报错

extract-text-webpack-plugin插件有问题，推荐使用mini-css-extract-plugin，修改webpack.prod.conf.js和util.js配置

//webpack.prod.conf.js

// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// ...
// extract css into its own file
// new ExtractTextPlugin({
// ...
// })
// 升级 webpack4， 由 ExtractTextPlugin 改用 MiniCssExtractPlugin
new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css'),
  allChunks: true,
}),

//util.js
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

  if (loader) {
    loaders.push({
      loader: loader + '-loader',
      options: Object.assign({}, loaderOptions, {
        sourceMap: options.sourceMap
      })
    })
  }

  // Extract CSS when that option is specified
  // (which is the case during production build)
  // if (options.extract) {
  //   return ExtractTextPlugin.extract({
  //     use: loaders,
  //     fallback: 'vue-style-loader'
  //   })
  // } else {
  //   return ['vue-style-loader'].concat(loaders)
  // }
  // 升级 webpack4， 由 ExtractTextPlugin 改用 MiniCssExtractPlugin
  return [
    options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',
  ].concat(loaders)
}

打包完成，完成将webpack3升级到webpack4

5、引入ts

安装vue的官方插件

npm i vue-class-component vue-property-decorator --save

// ts-loader typescript 必须安装，其他的相信你以后也会装上的
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

配置webpack
./build/webpack.base.conf.js，将entry.app中的main.js改成main.ts，顺便把项目文件中的main.js改成main.ts

entry: {
  app: './src/main.ts'
}

找到resolve.extensions 里面加上.ts 后缀 （是为了之后引入.ts的时候不写后缀）

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {
    '@': resolve('src')
  }
}

找到module.rules 添加webpack对.ts的解析

module: {
  rules: [
    { // 添加tslint
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader'
    },
    { // 添加tsloader
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
    },
  ]
}

添加tsconfig.js

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

添加tslint.json

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

让ts识别.vue
由于ts默认并不支持*.vue后缀的文件，所以在vue项目中引入的时候需要创建一个vue-shim.d.ts文件，挡在项目对应使用目录下，例如

// src/vue-shim.d.ts

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

意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。
而在代码中导入 .vue 文件的时候，需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 .ts 文件，不识别 *.vue 文件

import Component from 'components/component.vue'

改造.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

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

@Component({})
export default class App extends Vue {
}
</script>

<style>

</style>

7、将router下的index.js换成index.ts

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

使用npm run dev 运行项目成功。
但是这里有个问题就是当前文件是.vue文件，使用ts会有一个错误提示

所以这里想着把ts跟html文件分开，使用.ts后缀文件，拿App.vue举例说明
首先创建App.html文件

然后创建App.ts文件

使用npm run dev会报错

提示当前没有获取到template的html文件
这时需要配置一个raw-loader将当前.html文件展示在template上，使用npm install raw-loader@latest —save-dev

// webpack.base.conf.js

{
    test: /\.html$/,
    loader: "raw-loader",
    exclude: [/.\/src\/index.html/],
 }

配置完成npm run dev 运行项目，根据当前raw-loader版本不同可能会报错

如果报错需要更改一下.html的require方式，更改为

require(‘./App.html’).default

至此完成vue+webpack4+typescript搭建项目

6、绑定原型方法

当我们搭建完成项目之后，可能会想在vue.prototype上绑定例如$axios等方法，这时我们使用以前的方法

import axios from ‘axios’
Vue.prototype.$axios = axios;

当我们使用this.$axios时会报错


这时，我们需要在src目录下创建一个vue-shim.d.ts文件，添加如下内容即可

//    在 types/vue.d.ts 里 Vue 有构造函数类型
declare module 'vue/types/vue' {
  // 3. 声明为 Vue 补充的东西
  interface Vue {
    $axios: any
  }
}

Vue官网上个对此有解释
https://cn.vuejs.org/v2/guide...