混淆:如何使用带有TypeScript的es6浏览器模块(没有模块绑定器)

我想用es6模块组织我的typescript代码,并通过浏览器中的script type=“module”直接加载它们。我已经检查了支架( https://caniuse.com/#feat=es6-module )这会奏效的。我使用chrome版本66。

我尝试过,但没有成功(见下面的代码),而且我对使用正确的策略感到困惑。

解决方案1 :应用程序内。ts文件,我应该导入外部模块,但如何加载正确的js文件?

解决方案2 :应用程序内。ts文件,是否应直接导入。js代码,但如何引用。d、 ts文件是否具有签入类型?

任何帮助都将不胜感激。

=======================================================================

这是我尝试过的代码

我的索引。html文件

<!-- 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>

我的应用程序。ts文件

//Solution 1
// import Vue from "vue"; // Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

//Solution 2
import Vue from "./Vendors/vue.esm.browser.js"; // It works in the browser but i have lost the definition inside Typescript file

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

我的tsconfig。json文件

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "allowJs": true
  }
}

我的包裹。json文件

{
  "name": "vuejsbrowseresmodule",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.16"
  }
}