webpack@next多页脚手架便捷配置typescript & vue-typescript & vue-class-typescript

对原有的1.x版本进行的大版本的升级。本多页脚手架面向实际工作流，能够覆盖绝大多数的使用场景，在实际工作中，能结合的应用场景会更加多元化。

github：https://github.com/pomelott/webpack-multi-page-cli

如对您有帮助，请给星，如有问题请提issue。 

webpack手动接入ts需要以下几个方面：

一、使webpack能够识别ts并利用ts编译器编译成js文件

二、使vue等框架接入ts文件（以vue为例）

1. vue的script标签中可使用ts

2. vue能够识别ts的声明信息

3. vue组件中可以引入并识别纯.ts文件

4. vue的class式写法能够识别ts

 

以下分部解决：

一、使webpack能够识别ts并利用ts编译器编译成js文件

npm install typescript ts-loader --save-dev

　然后再webpack中设置loader

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

　设置无后缀文件的识别顺序：

extensions: ['.ts', '.tsx', '.js', '.vue', '.json']

　根目录下添加 tsconfig.json 文件：

// tsconfig.json
{
    "compilerOptions": {
      // 与 Vue 的浏览器支持保持一致
      "target": "es5",
      // 这可以对 `this` 上的数据 property 进行更严格的推断
      "strict": true,
      // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "experimentalDecorators": true,
      "allowSyntheticDefaultImports": true
    }
    
  }

二、使vue等框架接入ts文件

根目录下创建 vue-shims.d.ts 文件，为vue声明，使ts能够是被.vue文件

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

此处需要注意，在script标签上要指明lang=“ts”, 且在引入vue组件时需要指明.vue的后缀名。

其次需要在使用class语法的时候能够识别ts：

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

注意，以上两个npm包需要安装在生产环境下。

其次需要在babel 中增加两个 proposal插件：

　　　　　"plugins": [
		["@babel/plugin-transform-runtime"],
		["@babel/proposal-decorators", { "legacy": true }],
    	　　　　　["@babel/proposal-class-properties", { "loose": true }]
	]

这样就可以使用ts + vue class的语法了

以一个弹窗pop组件为例：

<template>
  <div class="pop-bg flex v-center h-center" :style="{display: showFlag}" >
    <div class="pop-inter flex v-center h-center" :class="showPopClass">
        <div class="pop-cnt">
            <div class="topic">{{topic}}</div>
            <div class="sub-title mt20 mb50" v-html="finalTitle"></div>
            <button @click="closePop">close</button>
        </div>
    </div>
  </div>
</template>

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

import {Component, Prop} from 'vue-property-decorator'
@Component({})
export default class Pop extends Vue {

    @Prop({
        type: String,
        required: true
    }) topic!: String

    // initial data
    title = 'this vue file was <br> written with vue-class-component';
    showPopClass: String = '';
    showFlag: string = 'none';

    // lifecycle hook
    mounted () {
        console.log('vue-class-component mounted !')
    }

    // computed
    get finalTitle () {
    return this.title + ' and TS.'
    }

    // method
    public async pop():Promise<void> {
        console.log('pop')
        this.showFlag = 'flex';
        await this.$nextTick();
        this.showPopClass = 'animate__animated animate__bounceInUp'
    // alert('greeting: ' + this.msg)
    }

    closePop () {
        this.showFlag = 'none';
    }
}
</script>
<style lang="scss">
div.pop-bg{
    background: rgba(0,0,0, .7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: none;
    .pop-inter{
        width: 400px;
        height: 400px;
        background: #fff;
        border-radius: 10px;
        .pop-cnt{
            background: #fff;
            button{
                padding: 10px 28px;
            }
        }
        .topic{
            font-size: 26px;
        }
        .sub-title{
            font-size: 14px;
            color: #999;
        }
    }
}
</style>

 

vue-property-decorator主要用于使用ts语法对vue进行类型声明等，而vue-class-component则主要用于声明类式继承语法。
具体工程化项目详见：github：https://github.com/pomelott/webpack-multi-page-cli