Путать: как использовать модуль браузера es6 с Typescript (без компоновщика модулей) - PullRequest
Новая
       27

Путать: как использовать модуль браузера es6 с Typescript (без компоновщика модулей)

0 голосов
/ 14 мая 2018

Я хотел бы организовать свой код для набора текста с помощью модуля es6 и загрузить их через скрипт type = "module" прямо в браузере. Я проверил поддержку (https://caniuse.com/#feat=es6-module), и она будет работать. Я использую Chrome версии 66.

Я пытался безуспешно (см. Код ниже), и, кроме того, я запутался в правильной стратегии.

Решение 1 : Должен ли я импортировать внешний модуль в файл app.ts, а затем загрузить правильный файл js?

Решение 2 : Должен ли я импортировать код .js непосредственно в файл app.ts, но как ссылаться на файл .d.ts, чтобы иметь тип checkin?

Любая помощь будет принята с благодарностью.

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

Это код, который я пробовал

Мой файл 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"
  }
}

1 Ответ

0 голосов
/ 14 мая 2018

После нескольких дней исследований я нашел ответ. На данный момент это невозможно сделать с машинописью без использования загрузчика модулей. О машинном загрузчике в браузере много говорится о машинописи.

Более подробная информация доступна здесь =>

https://github.com/Microsoft/TypeScript/issues/16577 https://github.com/Microsoft/TypeScript/issues/13422

Начался интересный проект предложения, который доступен здесь =>

https://github.com/domenic/package-name-maps

...