无需模块打包器，浏览器中TypeScript结合ES6模块的方案咨询

咱们直接针对你遇到的两个问题，一步步给出可落地的解决方案：

问题1：import Vue from "vue" 浏览器报错的原因与解决 #

浏览器的ES模块规范不支持裸模块标识符（比如"vue"这种不带路径的模块名），必须使用相对路径、绝对路径或者完整URL。要让裸模块名的导入在浏览器正常工作，有两个简单方案：

方案A：直接用CDN的ES模块版本 #

在TypeScript里直接导入Vue的CDN ES模块链接，编译后的JS文件能被浏览器直接解析：

// app.ts
import Vue from 'https://unpkg.com/vue@2.5.16/dist/vue.esm.browser.js';

const app = new Vue({
  el: '#app',
  data: {
    msg: 'hello :)!'
  }
});

这种方式不需要额外配置，浏览器会自动从CDN加载Vue模块，同时后续我们可以通过类型定义包让TS提供类型检查。

方案B：映射裸模块名到本地文件 #

如果你想保持import Vue from "vue"的写法，同时加载本地的Vue文件，可以通过tsconfig.json的paths配置实现：

1. 先把node_modules/vue/dist/vue.esm.browser.js复制到你的./Vendors/目录（和你方案2的路径一致）；
2. 修改tsconfig.json，添加baseUrl和paths配置：

{
  "compilerOptions": {
    "strict": true,
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "allowJs": true,
    "baseUrl": ".", // 项目根目录为基准路径
    "paths": {
      "vue": ["./Vendors/vue.esm.browser.js"] // 把"vue"映射到本地文件
    }
  }
}

这样TS会把import Vue from "vue"解析为本地的./Vendors/vue.esm.browser.js，编译后的JS文件里的导入路径会自动变成相对路径，浏览器就能正确加载了。

问题2：导入本地JS文件后，TS失去类型检查的解决 #

当你直接导入JS文件时，TS默认不会自动关联对应的类型定义，我们需要手动配置来恢复类型检查：

步骤1：安装Vue的类型定义包 #

先通过npm安装Vue的官方类型定义：

npm install @types/vue --save-dev

步骤2：让TS识别JS文件的类型 #

有两种方式可以实现：

方式一：在文件顶部添加三斜线指令

在app.ts的最顶部添加类型引用指令，告诉TS加载Vue的类型定义：

/// <reference types="vue" />
import Vue from "./Vendors/vue.esm.browser.js";

const app = new Vue({
  el: '#app',
  data: {
    msg: 'hello :)!'
  }
});

这样TS就会对Vue相关的代码进行完整的类型检查。

方式二：通过tsconfig全局配置类型

修改tsconfig.json，让TS自动加载Vue的类型定义，不需要在每个文件里加指令：

{
  "compilerOptions": {
    "strict": true,
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "allowJs": true,
    "typeRoots": ["./node_modules/@types"], // 指定类型定义的根目录
    "types": ["vue"] // 自动加载Vue的类型定义
  }
}

完整可运行的配置示例 #

最后给你整合一套兼顾两种需求的完整配置：

tsconfig.json #

{
  "compilerOptions": {
    "strict": true,
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "vue": ["./Vendors/vue.esm.browser.js"]
    },
    "typeRoots": ["./node_modules/@types"],
    "types": ["vue"]
  }
}

app.ts #

import Vue from "vue";

const app = new Vue({
  el: '#app',
  data: {
    msg: 'hello :)!'
  }
});

index.html #

<!DOCTYPE html>
<html>
<head>
  <title>Welcome</title>
</head>
<body>
  <div id="app">
    <img src="https://vuejs.org/images/logo.png" alt="Vue logo">
    <h1>{{ msg }}</h1>
  </div>
  <script type="module" src="app.js"></script>
</body>
</html>

编译后，浏览器会正确加载app.js和对应的Vue模块，同时TS会全程提供类型检查。

内容的提问来源于stack exchange，提问作者rdhainaut