TS入门009_02Vue_ts配置和webpack

去 webpack官网

  • get started

  • 开始抄

    1
    2
    3
    4
    5
    mkdir webpack-demo
    cd webpack-demo
    npm init -y
    npm install webpack@4.22.0 --save-dev
    npm install webpack-cli@3.1.2 --save-dev

  • 新建 src/index.js

    1
    console.log('hi');

  • 新建 webpack.config.js 从 官网抄

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const path = require('path');

    module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
    };

  • npx webpack 意思你要声明 mode

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Hash: 8b2187a6e37dccc947c6
    Version: webpack 4.39.1
    Time: 322ms
    Built at: 2019-08-11 18:53:08
    Asset       Size  Chunks             Chunk Names
    main.js  978 bytes       0  [emitted]  main
    Entrypoint main = main.js
    [0] ./src/index.js 50 bytes {0} [built]

    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

  • 添加 mode

    1
    2
    3
    4
    5
    module.exports = {
    ...
    mode:"development",
    ...
    };

  • 再次运行 npx webpack 此时没警告了

  • 我们需要两个配置，一个是 dev 一个是 prod

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 新建 webpack.prod.js 内容和 webpack.config.js 区别就是 mode 不一样
    const path = require('path');
    module.exports = {
    entry: './src/index.js',
    mode:"production",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
    };

  • 需改 package.json

    1
    2
    3
    4
    5
    6
    7
    "scripts": {
        "build:dev": "webpack",
        "build": "webpack --config webpack.prod.js",
    }

    // npm run build:dev 就是编译 不压缩
    // npm run build 就是编译 压缩

  • 搞出一个页面来显示,那么就需要 webpack-dev-server

    1
    npm install webpack-dev-server@3.1.9 --save-dev

  • npx webpack-dev-server 还无法显示 因为你需要 webpack html plugin

    1
    npm i --save-dev html-webpack-plugin@3.2.0

  • 如何使用 html-webpack-plugin 看 usage 然后抄

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
    entry: 'index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
    }

  • webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
    entry: './src/index.js',
    mode:"development",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
    };

  • 修改 index.js

    1
    2
    3
    4
    5
    6
    console.log("Hello World from index main file!");
    let div = document.createElement('div');
    div.id = 'app';
    div.textContent = "hjx webpack";

    document.body.appendChild(div);

  • 运行 npx webpack-dev-server

使用Vue

  • src/Hjx.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
    <div>I am Hjx,{{msg}}</div>
    </template>

    <script>
    export default {
        name:'hjx',
        data(){
            return {
                msg:'你好！'
            }
        }
    }
    </script>
    <style>
    </style>

  • 安装 vue 运行 npm i vue@2.5.17

  • 安装 vue loader

    1
    npm install -D vue-loader@15.4.2 vue-template-compiler@2.5.17

  • 修改 webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const VueLoaderPlugin = require('vue-loader/lib/plugin')

    module.exports = {
    entry: './src/index.js',
    mode:"development",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new VueLoaderPlugin()
    ]
    };

  • npx webpack-dev-server 终于成功了

配置ts

但是不知道怎么配置，借助 google

搜 typescript loader

得到两个答案，只能挨个试

ts-loader

  • npm install ts-loader@5.2.2 -D
  • npm install typescript --save-dev3.1.3 -D

  • 修改 webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const VueLoaderPlugin = require('vue-loader/lib/plugin')

    module.exports = {
    entry: './src/index.js',
    mode:"development",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 默认允许加载ts / tsx 结尾的东西
    resolve: {
        // 
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new VueLoaderPlugin()
    ]
    };

  • 新建 tsconfig.json

    1
    2
    3
    4
    5
    {
    "compilerOptions": {
        "sourceMap": true
    }
    }

  • 新建 src/test.ts

    1
    2
    const a: number = 1;
    export const b = a;

  • 修改 src/index.js

    1
    2
    import {b} from './test.ts';
    console.log(b);

  • 再次运行 npx webpack-dev-server 成功了，此时我们的配置 既支持vue又支持 ts

修改我们的入口文件 index.js 为 index.ts

  • webpack.config.js 里的入口修改

  • 此时运行npx webpack-dev-server报错了

    1
    2
    3
    4
    5
    6
    Cannot find module './Hjx.vue'.
    // 没改之前可以，改了反而不行了。

    // 有没有可能是 ts 找不到，一定是配置有问题

    // 参考上篇的vue-cli 生成的 ts配置

  • 修改 tsconfig.js ,然后运行 npx webpack-dev-server 还是报那个错

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
        "compilerOptions": {
        "sourceMap": true,
        "baseUrl": ".",
        },
        "include": [
            "src/**/*.ts",
            "src/**/*.tsx",
            "src/**/*.vue",
            "tests/**/*.ts",
            "tests/**/*.tsx"
        ],
        "exclude": [
            "node_modules"
        ]
    }

  • 只能借助 google 了 typescript cannot find module vue

    1
    2
    3
    // 大概意思就是 没有声明文件
    // 继续参考vue-cli 生成的声明文件
    This is because you don't have declarations of .vue files, then the typescript compiler cannot load them. You need to declare general declaration of .vue file in your project or generating each .vue file declaration by using vuetype

  • 新建 shims-vue.d.ts

    1
    2
    3
    4
    declare module '*.vue' {
        import Vue from 'vue'
        export default Vue
    }

  • 运行 npx webpack-dev-server 此时 我们就可以脱离js了

在vue组件里使用 ts

  • vue loader typescript

  • 找到一个 riku179 的答案

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    module: {
        rules: [
            {
                test: /\.js/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    // presets: ['es2015', { modules: false }] <- fail
                    presets: ['es2015']
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            appendTsSuffixTo: [/\.vue$/]
                        }
                    },
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    esModule: true,
                }
            },
        ]
    }

  • 修改我们的 webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    esModule: true,
                }
            },
            {
                test: /\.tsx?$/, loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            }
        ]
    }

  • src/Hjx.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <template>
    <div>
        {{number}}
        <button @click="add">+</button>  
        <button @click="minus">-</button>  
    </div>
    </template>

    <script lang="ts">
    export default {
        name:'hjx',
        data(){
            return {
                number:0,
            }
        },
        methods:{
            add(){
                let number:number = this.number + 1;
                this.number = number;
            },
            minus(){
                let number:number = this.number - 1;
                this.number = number;
            }
        }
    }
    </script>
    <style>
    </style>

  • 成功～

所有都是通过 google 没有任何书和文档说明这些，所以只能通过细节一个一个推敲

代码