混淆:如何将ES6浏览器模块与Typescript一起使用(不带模块捆绑器)

雷诺

我想用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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

浏览器中的ES6模块:Uncaught SyntaxError:意外的令牌导入

将新的实验性Node的EventTarget类与ES6模块一起使用

做出反应和浏览器化以与ES6一起使用

在Webpack中将文件加载器与es6模块和打字稿一起使用

将Babel与单个输出文件和ES6模块一起使用

angular-cli如何与ES6模块一起使用?

在浏览器中使用ES6模块时,应该在`script`标记中引用文件吗?

将Javascript库作为具有不同浏览器和Node.js实现的ES6模块发出

如何在浏览器的JavaScript控制台中访问ES6模块中定义的功能?

浏览器中的ES6模块加载器将忽略cookie

从ES6模块解析到绝对URL的相对路径(在浏览器中)

如何将ES6导入和'request'npm模块一起使用

在浏览器中使用模块(不带WebPack)

如何在浏览器中加载简单的es6模块?

第三方库如何与ES6模块一起使用?

带有ES6模块导入的ServiceWorker(谷歌浏览器)

浏览器中的ES6模块

如何确定节点模块是否可以使用Webpack捆绑并在浏览器中运行?

如何将无头铬模块与AWS Lambda捆绑在一起?

如何使用CommonJS模块将Webpack和ES6与依赖项一起使用?

将ES6模块与WebPack一起使用,为何仍需要

与Webpack捆绑在一起时,在服务器和浏览器中都能工作的Node.js HTTP请求模块吗?

为什么在ES6模块上使用模块捆绑器?

webpack 是否使 ES6 模块与 ES5 浏览器兼容?

在浏览器中的 es6 模块中无法识别从 node_modules 导入

在浏览器中,不执行从 ES6 模块导入的 JS 代码

如何将 .env 与 ES6 模块与 node js 和 express 应用程序一起使用?

2021年如何使用npm包作为浏览器加载的ES6模块?

如何使 axios 与浏览器中的 ESM 模块一起使用?