rdh*_*aut 5 typescript es6-modules vuejs2
我想用 es6 模块组织我的打字稿代码，并通过脚本 type="module" 直接在浏览器中加载它们。我已经检查了支持（https://caniuse.com/#feat=es6-module）并且它可以工作。我使用的是 chrome 66 版本。
我尝试过但没有成功（参见下面的代码），而且我对使用的正确策略感到困惑。
解决方案1：在app.ts文件中，我应该导入外部模块，但是如何加载正确的js文件？
解决方案 2：在 app.ts 文件中，我应该直接导入 .js 代码，但如何引用 .d.ts 文件来进行类型签入？
任何帮助将不胜感激。
=================================================== =====================
这是我尝试过的代码
我的index.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>
我的 app.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
}
}
我的 package.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"
}
}
经过几天的研究，我找到了答案。目前，如果不使用模块加载器，就不可能使用打字稿。在 TypeScript 中有很多关于浏览器中的本机加载器的讨论。
更多信息请点击这里=>
https://github.com/Microsoft/TypeScript/issues/16577 https://github.com/Microsoft/TypeScript/issues/13422
一份有趣的提案草案已经开始，可在此处获取 =>
https://github.com/domenic/package-name-maps
| 归档时间： |
|
| 查看次数： |
2174 次 |
| 最近记录： |