[Front-end engineering] Build Webpack+Vue All In TS project with TS

preface

Are you still using vue-CLI one-click generation projects after 9102 years? Have you never used TypeScript after 9102 years

If you’ve ever worked with TypeScript, you’ll know how great it is to ban and zhuan

However, if You’ve ever tried to build a TypeScript project yourself, You’ve probably found that there are a lot of holes in it. To get out of the holes, remember Evan You

If you ask me why Webpack is configured in TypeScript, it’s because of code cleanliness, so

Read this article and you will learn

• How to useTypeScriptwriteWebpackconfiguration
• How to useTypeScript + WebpackbuildVueproject
• Out of the boxTypeScript + Webpackproject
• Out of the boxTypeScript + Webpack + Vueproject
• Out of the boxTypeScript + Webpack + Vue + H5 for VW adaptationproject

How to useTypeScriptwriteWebpackconfiguration

1. inWebpackOfficial documentation found onTypeScriptConfigure language supportWebpack.js.org/configurati…

2. Read the documentation. The idea is to use TS-Node to run Webpack

3. Dependencies with type definitions required by the installation project

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

4. Configure entry files and package exits

5. Configuration tsconfig. Json

{
  "compilerOptions": {
    "module": "commonjs"."target": "es5"."esModuleInterop": true}}Copy the code

6. Let TS-Node find the configuration file. After installing the dependency, there are two options

$ npm i -D tsconfig-paths
Copy the code

// Scenario 1: Add NPM scripts
// "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"

// Option 2: use package.json config
"config": {
    "TS_NODE_PROJECT": "\"tsconfig-for-webpack-config.json\""
  },
Copy the code

7. Regarding type definitions, such as configuration of the development environment,MacSystem, hold downcommandClick to view the package nameWebpackNamespace in the source code

8. Try running

How to useTypeScript + WebpackbuildVueproject

1. invue-loaderOfficial documents foundts-loaderPreprocessor configurationVue-loader.vuejs.org/zh/guide/pr…

npm i -D typescript ts-loader
Copy the code

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

2. vue-loaderV15 needs to be configuredWebpackPlug-ins can be used correctlyVue-loader.vuejs.org/migrating.h…

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

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

3. Check out the official Vue. Js documentation for TypeScript support vuejs.org/v2/guide/ty…

4. Add vue-shims.d.ts to the project SRC

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

5. The installationVuerightTypeScriptSupported dependencies

$ npm i -D vue-class-component vue-property-decorator
Copy the code

6. Have fun

<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>
Copy the code

The project code repository: github.com/atbulbs/all…