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

1

Я начинаю новый проект, в котором я хотел бы иметь модули стиля 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"
  ]
}
  • 0
    Все просто: они не
  • 0
    Ты уверен? Если так, то что я здесь не так понимаю? contentful.com/blog/2017/04/04/...
Показать ещё 7 комментариев
Теги:
ecmascript-6
es6-modules
es6-module-loader

1 ответ

1
Лучший ответ

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

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

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

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

Плохие:

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

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

  • Общий синтаксис загрузки модулей связан с сторонней библиотекой, называемой require js (https://requirejs.org/). Вы можете использовать эту библиотеку в проектах на стороне клиента, но вы должны установить ее и правильно настроить (документы достаточно понятны о том, как это сделать)
  • Вы всегда можете использовать тад-бегун, как 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!";
}
Поделиться
  • 0
    Спасибо за ответ. Это все еще относится к обновленному описанию вопроса?
  • 0
    Я считаю, что это ... ваши варианты: использовать нативные модули ES6 (и изменить способ экспорта ваших функций), установить require (и правильно его настроить) или просто решить использовать средство запуска задач, чтобы помочь вам преобразовать TS в единый минимизированный JS-файл, подходящий для клиентской среды
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню