JavaScript - Как заставить импорт ES6 работать в браузере? - PullRequest
Новая
       118

JavaScript - Как заставить импорт ES6 работать в браузере?

0 голосов
/ 27 октября 2018

Я начинаю новый проект, в котором мне хотелось бы иметь модули в стиле ES6, однако я не могу запустить его в браузере.Я использую Chrome.

Я выделил проблему в несколько строк кода.

Вот мои 2 файла TypeScript:

app.ts 

import { Component } from './component';

var component: Component = new Component();

component.ts 

export class Component {

}

Вот как они компилируются в JavaScript:

app.js 

import { Component } from './component';
var component = new Component();

component.js 

export class Component {
}

Мой index.html содержит только тег сценария.Я пробовал несколько вариантов, но ни один из них не работал.

index.html # 1 

<script src="src/app.js" type="module"></script>

Скрипт не загружен.(Нет запроса на вкладке сети)

index.html # 2 

<script src="src/app.js" type=module></script>

Скрипт не загружен.(Нет запроса на вкладке сети)

index.html # 3 

<script src="src/app.js"></script>

Uncaught SyntaxError: Неожиданный токен {

Я использую tsc для переноса TypeScript через код Visual Studio.

tasks.json 

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "silent"
            }
        }
    ]
}

tsconfig.json 

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": false,
    "removeComments": false,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "preserveConstEnums": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "../src/"
  },
  "exclude": [
    "logs",
    "node_modules"
  ]
}

1 Ответ

0 голосов
/ 27 октября 2018

Если честно - я думаю, что это хороший вопрос, потому что JS широко используется как на стороне сервера, так и на стороне клиента, что способствует уже существующей путанице среди разработчиков

Очевидно, чтоВаш TS код написан как код на стороне сервера (вероятно, на Node.js).Попытка запустить его (как есть) на стороне клиента ... ну ... сложно.Причина: синтаксис, который вы используете в своем коде, предполагает запуск на стороне сервера (а не на стороне клиента).Есть ли обходной путь?Ну ... да!

Хорошие новости:

JS ES6 имеет встроенный загрузчик модулей!( проверка MDN )

Плохие:

  • Синтаксис отличается от Node.js Синтаксис загрузчика модуля (при экспорте модуля)
  • Поддержка очень частичная (только для современных браузеров)

Некоторые дополнительные примечания:

  • Общий синтаксис загрузки модулейсвязана со сторонней библиотекой, которая называется require js (https://requirejs.org/).. Вы можете использовать эту библиотеку в проектах на стороне клиента, но вам необходимо установить ее и правильно настроить (в документации достаточно ясно, как это сделать)
  • Вы всегда можете использовать tadk runner, такой как grunt grunt (https://gruntjs.com/) или подобные проекты), чтобы помочь вам минимизировать и объединить весь ваш код в один файл в процессе производства. Почему вы спрашиваете? Это явно поможетВы облегчаете загрузку, когда клиент выбирает ваш веб-сайт (чем меньше файлов, тем лучше сетевой трафик)

Как видите, на ваш вопрос нет быстрого или простого ответа ... но это может бытьхорошая отправная точка, чтобы улучшить васЗнание и создание лучших современных веб-приложений.

ОБНОВЛЕНИЕ

В соответствии с просьбой я создал небольшую демонстрационную версию песочницы, которая показывает, как использовать нативный ES6модуль (https://codesandbox.io/s/oj2rwm9v35)

index.html 

<html>
<body>
    <div id="app"></div>
    <script type="module" src="src/primary.js"></script>
</body>
</html>

primary.js 

import test from "./test";

test();

test.js 

export default function test() {
  document.querySelector("#app").textContent = "Hello JS module!";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...