Vue+webpackDevMiddleware+TypeScript

2019-08-15

Vue + webpack-dev-middleware + TypeScript

一、背景

基础项目

基础项目是基于vue-cli+webpack-dev-middleware的项目。首先前端使用vue-cli搭建的环境(本教程略),然后使用express,配合webpack-dev-middleware发布前端文件。 server.js文件如下:

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./config/index')

const app = express();
const webpackConfig = require('./build/webpack.server.conf.js');
const compiler = webpack(webpackConfig);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath
}));

// Serve the files on port 3000.
const PORT = config.dev.port
app.listen(PORT, function () {
  console.log('Example app listening on port ' + PORT + '!\n');
});

Github项目:Vue-webpackDevMiddleware

webpack-dev-middleware

An express-style development middleware for use with webpack bundles and allows for serving of the files emitted from webpack. This should be used for development only.

仅用于开发环境,通常与Express配合使用,通过webpack工具可以对前端文件进行打包,配合webpack-hot-middleware可实现热加载。 Github项目:webpack-dev-middleware

二、开始改造

安装一些依赖为了支持TypeScript,需要增加一些依赖:

  • style-loader 1.0.0
  • ts-loader 6.0.4
  • tslint 5.18.0
  • tslint-config-standard 8.0.1
  • tslint-loader 3.5.4
  • typescript 3.2.2
  • vue-class-component 7.1.0
  • vue-property-decorator 8.1.1

注意,安装这些依赖要指定版本,不然不同版本的插件可能会不兼容。在package.json中,也把依赖的版本^去掉,防止不兼容。 除了新增了一些依赖,同时某些依赖的版本也有变化,建议直接拷贝下面的package.json文件,然后npm install安装。

{
  "name": "Vue-webpackDevMiddleware",
  "version": "1.0.0",
  "description": "A Vue project based on express. Use Webpack-dev-middleware to build a dev enviroment.",
  "author": "David-Shi-1989 <287841605@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "webpack-dev-server --open",
    "server": "node server.js",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "2.5.16",
    "vue-router": "3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "7.2.6",
    "babel-core": "6.26.3",
    "babel-eslint": "8.2.3",
    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-jest": "21.2.0",
    "babel-loader": "7.1.4",
    "babel-plugin-dynamic-import-node": "1.2.0",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-plugin-transform-vue-jsx": "3.7.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-stage-2": "6.24.1",
    "babel-register": "6.26.0",
    "chalk": "2.4.1",
    "clean-webpack-plugin": "0.1.19",
    "copy-webpack-plugin": "4.5.1",
    "cross-spawn": "5.1.0",
    "css-loader": "0.28.11",
    "eslint": "4.19.1",
    "eslint-config-standard": "10.2.1",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "2.1.0",
    "eslint-plugin-import": "2.11.0",
    "eslint-plugin-node": "5.2.1",
    "eslint-plugin-promise": "3.7.0",
    "eslint-plugin-standard": "3.1.0",
    "eslint-plugin-vue": "4.5.0",
    "express": "4.16.3",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "1.1.11",
    "font-awesome": "4.7.0",
    "friendly-errors-webpack-plugin": "1.7.0",
    "html-webpack-plugin": "3.2.0",
    "jest": "22.4.3",
    "jest-serializer-vue": "0.3.0",
    "nightwatch": "0.9.21",
    "node-notifier": "5.2.1",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "ora": "1.4.0",
    "portfinder": "1.0.13",
    "postcss-import": "11.1.0",
    "postcss-loader": "2.1.4",
    "postcss-url": "7.3.2",
    "rimraf": "2.6.2",
    "selenium-server": "3.11.0",
    "semver": "5.5.0",
    "shelljs": "0.7.8",
    "style-loader": "1.0.0",
    "ts-loader": "6.0.4",
    "tslint": "5.18.0",
    "tslint-config-standard": "8.0.1",
    "tslint-loader": "3.5.4",
    "typescript": "3.2.2",
    "uglifyjs-webpack-plugin": "1.2.5",
    "url-loader": "0.5.9",
    "vue-class-component": "7.1.0",
    "vue-jest": "1.4.0",
    "vue-loader": "14.2.2",
    "vue-property-decorator": "8.1.1",
    "vue-style-loader": "3.1.2",
    "vue-template-compiler": "2.5.16",
    "webpack": "4.0.0",
    "webpack-bundle-analyzer": "2.11.1",
    "webpack-cli": "2.1.2",
    "webpack-dev-middleware": "2.0.6",
    "webpack-dev-server": "3.1.0",
    "webpack-merge": "4.1.2"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

修改webpack配置文件与vue-cli搭出来的纯前端不同,我们这里使用express发布,webpack配置文件在build\webpack.server.conf.js。需要修改以下几点:

1.entry入口文件 入口文件由main.js改为main.ts

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

同时把src\main.js重命名为main.ts,文件内容如下:

// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')

2.resolve.extensions增加ts

resolve: {
  extensions: ['.ts', '.js', '.vue', '.json'],
  alias: {
    'vue/div>: 'vue/dist/vue.esm.js',
    '@': resolve('./src'),
  }
}

3.module.rules增加ts的规则

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

4.新建文件tsconfig.json

{
  "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
  }
}

5.新建文件src\vue-shims.d.ts

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

6.新建文件tslint.json

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

此时到这里,运行server.js(node server.js),页面可以正常打开。

修改vue文件此时项目已经支持ts了,接下来修改vue文件,将js代码改为ts代码。

  • 修改App.vue 由于实现等原因,ts代码放进vue文件不生效,所以把ts代码提出来,放在单独的ts文件里,在vue文件中引入。 App.vue:

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script lang="ts" src="./App.ts"></script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    App.ts:

    import Vue from 'vue'
    import { Component } from 'vue-property-decorator'
    
    @Component({
    })
    export default class App extends Vue{
      created () {
        console.log(`App created`)
      }
    }
  • 新增组件person-info.vue person-info.vue:

    <template>
      <p>
        <span>{{name}}</span>
        <span>{{age}}</span>
        <span>{{nickName}}</span>
        <span>{{timestamp}}</span>
      </p>
    </template>
    
    <script lang="ts" src="./person-info.ts">
    </script>
    <style scoped>
    </style>
    

    person-info.ts:

    import { Vue, Component, Prop } from 'vue-property-decorator'
    
    @Component({})
    export default class HelloWorld extends Vue {
      @Prop(String) name: string | undefined
      @Prop(Number) age: number | undefined
      @Prop(String) nickName: string | undefined
      @Prop(String) timestamp: string
    }
    
  • 修改HelloWorld.vue HelloWorld.vue引入person-info组件:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
    <personInfo :name="name" :age="age" nickName="sdas" :timestamp="ts"></personInfo>
  </div>
</template>

<script lang="ts" src="./HelloWorld.ts"></script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

HelloWorld.ts文件:

import { Vue, Component } from 'vue-property-decorator'
import personInfo from './person-info.vue'

@Component({
  components: {
    personInfo
  }
})
export default class HelloWorld extends Vue {
  msg: string = 'Welcome Typescript + Vue'
  ts: string = ''
  name: string = 'david'
  age: number = 29
  created () {
    this.ts = String(Date.now().valueOf())
    console.log(this.ts)
  }
}

三、结束

运行效果

此时,运行出来的页面如下: 最终效果

总结

改进

  • 解决告警mode WARNING in configuration. The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 解决办法:在build\webpack.server.conf.js中增加mode如下:

    // ...
    module.exports = {
      entry: {
        app: './src/main.ts'
      },
      mode: 'development',
      // ...
  • 告警 Warning: The 'await-promise' rule requires type information.等告警 解决办法: 待解决

  • ts代码写入vue文件中 解决办法: 待解决

原文链接:segmentfault.com

上一篇:vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
下一篇:React Hook起飞指南
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部