如何在没有复杂构建系统的情况下使用 Vue 和 Typescript？答案

【问题标题】：How to use Vue with Typescript, with no complicated build system?如何在没有复杂构建系统的情况下使用 Vue 和 Typescript？
【发布时间】：2023-03-03 13:38:01
【问题描述】：

我在这方面花了 2 天的时间进行试验，到目前为止还没有取得任何进展。我有一个非常基本的 ASP.NET Core 网站，为 Typescript 2.9 配置。我希望我的前端非常简单，每页只有一个 vue 应用，没有复杂的构建系统或组件。

我希望某种配置至少能正常工作。这是我当前的 tsconfig.json 文件：

{
  "compilerOptions": {
    "declaration": true,
    "mapRoot": "/js/",
    "module": "esnext",
    "removeComments": true,
    "sourceMap": true,
    "target": "esnext"
  },
  "compileOnSave": true

}

（请注意，我已经尝试过模块 es6、es5，也没有尝试过）

然后，在我的 wwwroot/js 文件夹中，我有 Site.ts，如下所示：

import { Vue } from "./types/vue";

var _mixin: any;
var _vue = new Vue({
    el: '#vueheader',
    mixins: [_mixin],
    data: {
    },
    methods: {},
    mounted: function () {
    },
});

在 wwwroot/js/types 文件夹中，我有来自 vue 的 5 个 d.ts 文件以及 vue.js 文件。打字稿正确编译成 js 文件，但是当我访问主页时，我在 chrome 中收到错误消息“404，找不到文件 /types/vue”

这里是编译好的 Site.js：

import { Vue } from "./types/vue";
var _mixin;
var _vue = new Vue({
    el: '#vueheader',
    mixins: [_mixin],
    data: {},
    methods: {},
    mounted: function () {
    },
});
//# sourceMappingURL=/js/Site.js.map

我的 html 有这个链接：

有人有什么想法吗？请不要让我使用像 webpack 这样复杂的构建系统。我不想用 600 多个依赖项使我的构建过程变得臃肿。

【问题讨论】：

据我所知，您需要一些类的构建系统。选择一个时考虑您的时间成本。
好吧，当然不排除实际的类型脚本编译器。你的意思是别的吗？
请不要让我使用像 webpack 这样复杂的构建系统。 - 这是你需要做的，即使没人这么说。除非您想接手 Webpack 的工作，并在编译文件中手动将所有 import 语句重写为工厂函数，然后将它们连接起来。工具的存在是因为它们有需求，而不是因为有人认为向不需要它们的项目引入 600 多个依赖项是个好主意。如果您使用的是编译器，这并不意味着您不需要捆绑器。这似乎与这个问题相同，stackoverflow.com/q/50642237。
TypeScript 只有在没有模块和导入的情况下才需要捆绑器，就像常规 ES5 一样，通过使用全局变量在文件之间交换数据。没有人使用 Vue 或其他类似的现代框架，因为它不切实际，而且您将很难找到有关如何正确执行此操作的参考……因为没有人像那样使用 Vue。
我基本上只需要Vue是强类型的。有没有办法在不使用模块系统的情况下获得该功能？除了将 Vue.d.ts 内容复制粘贴到每个消费 ts 文件中？

标签： typescript asp.net-core vue.js

【解决方案1】：

这实际上非常简单！我基于我的第一个使用 Require.js 的 Vue TodoMVC 风格的应用程序。您可以为自己的项目进行推断。

最简单的方法是使用 Require.js 或 System.js 等不需要捆绑的加载器 - 您只需使用 TypeScript 编译即可。

由于我使用的是 Require.js 和 Vue，这是我的package.json

{
  "name": "vue-tutorial",
  "version": "1.0.0",
  "dependencies": {
    "@types/requirejs": "^2.1.28",
    "vue": "^2.1.4"
  }
}

接下来，我要添加一个tsconfig.json

{
    "compilerOptions": {
        "outFile": "./built/app.js",
        "noImplicitAny": true,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "module": "amd",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "lib": [
            "dom", "es2015"
        ],
        "types": [
            "requirejs"
        ]
    },
    "include": [
        "src"
    ]
}

让我们分解一下：

outFile：TypeScript 将有效地将您的源代码捆绑到一个文件中（但不是它的依赖项！）。
noImplicitAny、strictNullChecks、noImplicitThis：只是一些特定的--strict 选项我强烈建议您至少打开。
module: amd：AMD 是 Require.js 可以理解的模块格式。
moduleResolution: node：这使得 TypeScript 可以轻松地从 node_modules 中提取 .d.ts 文件。
esModuleInterop：这允许我们使用现代语法导入 Vue。
lib：指定您希望在运行时拥有的标准 API。
types: .d.ts 我们不一定要导入的库文件；我们不导入 Require.js，因为我们希望它在全球范围内可用。

现在我们的index.html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello Vue!</title>
</head>

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

    <script src="https://unpkg.com/requirejs@2.3.5/require.js"></script>
    <script src="./built/app.js"></script>
</body>

</html>

让我们在src/components/GreetingComponent.ts 中创建我们的第一个组件：

import Vue from "vue";

export default Vue.extend({
    template: `<div>Hello {{name}}!</div>`,
    props: ["name"],
});

接下来，让我们创建一个index.ts：

import Vue from "vue";
import GreetingComponent from "./components/GreetingComponent";

new Vue({
    el: "#app",
    template: `<greeting-component name="Steve"></greeting-component>`,
    components: {
        GreetingComponent
    }
});

最后让我们创建一个引导程序来实际导入您的require-config.ts：

require.config({
    paths: {
        // JS library dependencies go here.
        // We're using a CDN but you can point to your own assets.
        "vue": "https://unpkg.com/vue@2.5.16/dist/vue",
    }
});
require(["index"]);

解释一下：

paths 将告诉 Require.js 在您使用裸路径导入 Vue 和其他库时在哪里查找它们。您可以自定义 Require.js 将在何处找到 Vue，但请记住您必须省略 URL 末尾的 .js。
最后对require 的调用将加载您的index 模块以启动您的程序。

运行tsc，打开index.html，一切都会正常运行！

【讨论】：

我最终得到了我的工作，甚至没有使用 require.js。我将 5 个 Vue.d.ts 文件添加到我的项目中，并制作了一个 global.d.ts 文件，并引用了 vue 类型文件。这使我的 typescript 编译器可以全局访问类型，因此我可以拥有强类型的 vue 实例。
嗨史蒂夫，我正在尝试做同样的事情。您介意分享您的 global.d.ts 文件吗？
要运行package.json，您需要npm 或yarn，根据问题需要避免...

【解决方案2】：

我正在使用 Vue3 并为我完成以下工作：

添加vue.d.ts

import Vue from "vue"
export = Vue;
export as namespace Vue;

修改tsconfig.json设置

{
  "compilerOptions": {
    "module": "UMD", 
    "moduleResolution": "node", 
    "esModuleInterop": true, 
    "skipLibCheck": true, 
  }
}

我的package.json

{
  "name": "test",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^3.0.2"
  }
}

我的test.ts

const App = {
    data() {
        return {
            counter: 0,
        };
    },
};

Vue.createApp(App).mount("#app");

生成test.js

var App = {
    data: function () {
        return {
            counter: 0
        };
    }
};
Vue.createApp(App).mount("#app");

没有错误。

【讨论】：