Хостинг Firebase выдает ошибку: Uncaught SyntaxError: Неожиданный идентификатор - PullRequest
Новая
       5

Хостинг Firebase выдает ошибку: Uncaught SyntaxError: Неожиданный идентификатор

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

Я пытаюсь разместить сайт, используя firebase-hosting, и получаю сообщение об ошибке: Uncaught SyntaxError: Unexpected identifier

Это происходит в script.js:1.Исходный код выглядит следующим образом: 

import axios from 'axios';

callWs();
console.log('This worked now!');

async function callWs() {
    try {
        const res = await axios(
            `https://us-central1-jpabiggmbh-001.cloudfunctions.net/realexData?amt=${500}&curr=${'CHF'}`
        );
        console.log('This function ran just now!');
    } catch (e) {
        console.log(e);
    }
    console.log(res);
}

Структура моей папки выглядит следующим образом (фокус на публичном дереве):

Files in Firebase project folder

Я вызываю скрипт в index.html: 

<head>
  <title>Fantastic title</title>
  <script src="script.js"></script>
</head>

Мой firebase-functions импорт работает нормально, но у меня есть файл package.json, и я предполагаю, что это одна из причин, почему у меня возникают проблемы?

Мой firebase.json файл выглядит так: 

{
  "database": {
    "rules": "database.rules.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

1 Ответ

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

Ошибка исходит из строки 1, которая содержит код: 

import axios from 'axios';

Это оператор ES Module import . Встроенная поддержка модулей в браузерах все еще довольно нова. Firefox только что начал поставлять это 9 мая 2018 . Вы должны убедиться, что вы используете браузер, который поддерживает модули .

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

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

Другой проблемой является значение from 'axios'. Браузер не знает пакетов npm и имен пакетов, поэтому вам нужно указать местоположение. 

import * as axios from '/node_modules/axios/dist/axios.min.js';

или 

import * as axios from 'https://unpkg.com/axios@0.18.0/dist/axios.min.js';

import из packageName - это сокращенный инструмент, используемый для обозначения локально установленных зависимостей.

Поскольку вы запускаете import в скрипте, это считается динамический импорт . Динамический импорт в настоящее время поставляется только в Chrome и имеет другой синтаксис. 

import('https://unpkg.com/axios@0.18.0/dist/axios.min.js')
  .then(axios => {
    axios.get(...);
  });

В конечном итоге вы пытаетесь использовать технологию, которая не совсем готова к использованию. Я бы порекомендовал добавить шаг компоновки, например, Webpack или Gulp .

...