Webpack Academy #额外内容：将 Webpack 与 TypeScript、Vue.js 和 Sass 结合使用

给关注我的 webpack 学院课程的朋友们一个小福利！

我将向您展示如何在Vue.js2和Sass中添加TypeScript！

本文将分为 3 个部分！如果您只需要在项目中添加 TypeScript，则只需阅读第一部分即可！

添加 TypeScript

要添加 TypeScript，我们需要添加一个加载器并安装一些依赖项！

我们将安装ts-loader能够处理.ts文件的程序！

我们需要添加tsconfig.json（ts-loader 将使用它来将 ts 文件转译为 js 文件）。

之后，我们将删除我们目录中的所有文件src/，以便添加index.ts（html 文件除外）。

我们需要在 webpack 配置中使用ts-loader ！

    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/,
        }]
    },

别名 typescript & webpack

如果在 webpack 中使用别名，则需要为 tsconfig 文件设置相同的别名！

webpack.config

    resolve: {
        alias: {
            '@': path.resolve(__dirname, "./src/"),
        }
    },

tsconfig.json

"paths": {
   "@/*": ["./src/*"]
},

您可以从这里查看所有更改。

添加 Vue.js 2

现在我们要安装 Vue2！我们将添加vue-loader.

我们需要安装另一个加载器。如果你还记得第一节课的内容，我解释过它的作用style-loader（它将 CSS 注入到 DOM 中）。我们需要用 `!` 替换它（它只在开发模式下使用），vue-style-loader`!` 的作用相同，但用于 Vue 文件中的 CSS！

好的，现在我们需要制作4样东西！

• 首先，需要为 webpack 设置 vue 的别名。
• 第二个与 TypeScript 有关。
• 第三种方法是将 Vue 库作为 CDN 添加进去。
• 最后一步是配置 Vue 并进行测试！

别名 vue (vue.esm.js)

在 webpack 配置中

'vue$': 'vue/dist/vue.esm.js',

使用 Vue 文件适配 TypeScript

当 TypeScript 处理 Vue 文件时，会遇到一些问题！因为它不是 ts 文件！但我们需要将 Vue 文件转译成 js 文件！

所以当我们声明我们的功能时ts-loader，我们需要添加这个。

options: {
   // Tell to ts-loader: if you check .vue file extension, handle it like a ts file
   appendTsSuffixTo: [/\.vue$/]
}

我们还需要创建一个名为 `.vue.xml` 的文件vue-shims.d.ts，它会告诉 TypeScript 编译器导入 .vue 文件是可以的。这样你就可以vue毫无问题地导入文件了.ts！

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

另外，我们需要把这个文件放在……ts-config

    "files": [
        "./vue-shims.d.ts",
    ]

😅 我们快要完成了！加油💪

使用 CDN 导入 Vue

如果您想了解 CDN 的工作原理，请前往我的学院中专门介绍 CDN 的部分，但您需要添加vue cdn link开发模式和vue.min生产模式的相同内容。

别忘了添加external property into the webpack.config

配置 Vue.js

我们只需要配置一下vuejs，就完成了！

首先，我们需要创建index.tsVue 的入口文件。

import Vue from "vue"
import App from "./app/App.vue"

Vue.config.productionTip = false

export const app = new Vue({
    el: "#app",
    render: h => h(App),
})

我更喜欢将代码拆分成.vue两个文件.ts：我的 Vue 文件将包含样式和模板，TypeScript 文件将包含所有组件逻辑。

app.vue

<template>
<div class="toto">
    Hello there
</div>
</template>

<script lang="ts" src="./App.ts"></script>
<style scoped>
    .toto {
        color: blue;
    }
</style>

app.ts

import Vue from "vue"

export default Vue.extend({})

最后要做的是创建html filevuejsdiv将要使用的 div（vue 将使用此 div 来注入其组件）。

正如入口文件中所述，它id是app。所以我们只需要将其注入到我们的html！

<div id="app"></div>

您可以从这里查看所有更改。

SASS

如果您只对使用 webpack 的 SASS 感兴趣，可以跳过 vuejs 部分！

让我们把它添加sass-loader到我们的项目中，我们需要在处理 CSS 之前使用它！因为 Sass 会将文件转.scss译成.css!

我们还需要修改处理.scss文件的正则表达式

test: /\.(sa|sc|c)ss$/,

风格的别名

我喜欢给样式文件使用别名！

所以我们可以去那里，但是我们需要把它添加到 webpack 配置和 typescript 配置中！

之后，我们就可以创建第一个.sass文件了。

$main-colors: #6096BA;
$hover: #45718D;
$active: #385A71;
$grey: #677681;
$light: #B7D0E1;
$black: #233947;

并用它来.vue

<style lang="scss" scoped>
    @import "~style/import.scss";
    div {
        background: $grey;
    }
</style>

注意：我们还需要安装sass软件包！

希望你喜欢这份超值奖励！

希望您喜欢这篇文章！

🎁 如果你在推特上关注我并私信我，就可以Underrated skills in javascript, make the difference免费获得我的新书哦😁

或者点击这里获取。

🎁我的电子报

☕️ 您可以支持我的作品🙏

🏃‍♂️ 你可以关注我 👇

🕊 Twitter：https://twitter.com/code__oz

👨‍💻 Github：https://github.com/Code-Oz

您可以收藏这篇文章！