„Nieoczekiwany import tokena” w Nodejs5 i babel?

192

W pliku js użyłem importu zamiast wymagać

import co from 'co';

I próbował uruchomić go bezpośrednio przez nodejs, ponieważ powiedział, że import to „funkcje wysyłki” i obsługa bez żadnej flagi środowiska wykonawczego ( https://nodejs.org/en/docs/es6/ ), ale dostałem błąd

import co from 'co';
^^^^^^

SyntaxError: Unexpected token import

Potem próbowałem użyć babel

npm install -g babel-core
npm install -g babel-cli
npm install babel-core //install to babel locally, is it necessary?

i prowadzony przez

babel-node js.js

nadal pojawia się ten sam błąd, nieoczekiwany import tokena?

Jak mogę się tego pozbyć?

jovi
źródło
14
@ FelixKling: Chociaż odpowiedź na połączone pytanie z pewnością również odpowiada na to pytanie, trudno jest postrzegać to pytanie jako duplikat tego. W każdym razie cieszyłem się, że mam go tutaj, ponieważ Google sprowadził mnie bezpośrednio tutaj, ponieważ opisany błąd składni dokładnie pasował do tego, co widziałem. Szczerze cieszę się, że PO opublikował to, zamiast szukać nieco pokrewnego pytania z odpowiedzią, która się spełniła.
Scott Sauyet 18.03.16
3
npm i --save-dev babel-cli Naprawiono to dla mnie ...
ChuckJHardy
2
Głosuję za odznaczeniem tego jako duplikatu, uważam, że jest to osobne pytanie.
TWR Cole
3
To nie jest duplikat. Jeden inne rozwiązanie chciałbym post jest do podwójnego sprawdzenia masz tej wtyczki w .babelrc: "transform-es2015-modules-commonjs".
Dan Dascalescu,
7
Duplikaty są (powinny być) w porządku. To ważna część pracy ludzi. To, co mówi @ScottSauyet, jest jednym z powodów. Różne wyjaśnienia z różnych perspektyw to kolejne. Całe to „polowanie na duplikaty” przez lata nie jest dla mnie pomocne jako gość reguar. Chciałbym, żeby to się skończyło.
Stijn de Witt

Odpowiedzi:

202

Informacje o wydaniu babel 6:

Ponieważ Babel koncentruje się na byciu platformą dla narzędzi JavaScript, a nie transpilatorem ES2015, zdecydowaliśmy się na włączenie wszystkich wtyczek. Oznacza to, że po zainstalowaniu Babel domyślnie nie będzie transponować kodu ES2015.

W mojej instalacji zainstalowałem preset es2015

npm install --save-dev babel-preset-es2015

lub z przędzą

yarn add babel-preset-es2015 --dev

i włączyłem preset w moim .babelrc

{
  "presets": ["es2015"]
}
Laurence Bortfeld
źródło
14
Dobra odpowiedź. Niestety nadal musisz użyć metody replace () i nie możesz użyć importu dla pakietów npm.
Jagtesh Chadha,
24
Używam babel-noderazem z es2015i reactustawień. Ten sam błąd.
FuzzY,
3
Nie działa. Tak, jest to potrzebne, ale nie powoduje importu.
still_dreaming_1
6
Dla mnie było to proste rozwiązanie. Zostałem złapany na wizję tunelu, próbując przystosować kod z jednego projektu React / Babel do innego projektu es5 i jednocześnie zaktualizować składnię do es6. W mojej skrypcie package.json zapomniałem zastąpić „node run” przez „babel-node run.js”. Tak, czuję się zakłopotany. :)
joezen777
2
Ekosystem JS jest taki łatwy
Rodrigo
51

Do czasu wdrożenia modułów możesz użyć „transpilatora” Babel do uruchomienia kodu:

npm install --save babel-cli babel-preset-node6

i wtedy

./node_modules/babel-cli/bin/babel-node.js --presets node6 ./your_script.js

Jeśli nie chcesz pisać --presets node6, możesz zapisać plik .babelrc przez:

{
  "presets": [
    "node6"
  ]
}

Zobacz https://www.npmjs.com/package/babel-preset-node6 i https://babeljs.io/docs/usage/cli/

Vincent Mathew
źródło
16
ostatnia rekomendacja od babel folks to użycie babel-preset-env, który wykrywa, które wielopełniacze mają być uruchamiane, a nie babel-preset-node*. W .babelrcużyciu:{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
ronen
Po tym zacząłem otrzymywać błąd (nierozpoznany token „<”): server.js:Unexpected token (37:12) 35 | const initialState = store.getState(); 36 | const componentHTML = renderToString( > 37 | <Provider store={store}> | ^ 38 | <RouterContext {...props} /> 39 | </Provider>, 40 | );
AK
26
  1. Zainstalować pakiety: babel-core, babel-polyfill,babel-preset-es2015
  2. Twórz .babelrcz zawartością:{ "presets": ["es2015"] }
  3. Nie umieszczaj importinstrukcji w głównym pliku wejściowym, użyj innego pliku, np .: app.jstwój główny plik wejściowy powinien być wymagany babel-core/registeri babel-polyfillaby Babel działał osobno przede wszystkim. Następnie możesz wymagać instrukcji app.jswhere import.

Przykład:

index.js

require('babel-core/register');
require('babel-polyfill');
require('./app');

app.js

import co from 'co';

Powinien współpracować z node index.js.

Adiono
źródło
1
Jest to łatwe obejście, które można wykorzystać do programowania. Chociaż do produkcji zawsze należy kompilować kod es5.
Jonas Drotleff
czekaj ... czy to jest to, co myślę? kilka miesięcy temu miałem marzenie, że javascript / perl / dowolny język można rozszerzyć bez aktualizacji poprzez niestandardowe dodatkowe parsowanie istniejącego języka w tym samym języku. Czy o to tu chodzi ???
Dmitry
Doskonała odpowiedź. Ale w skryptach możesz umieścić coś takiego jak poniżej. Możesz więc użyć w dowolnym pliku. „scripts”: {„build”: „babel src -d dist”, „start”: „node dist / index.js”}
gkarthiks
15

babel-preset-es2015 jest teraz przestarzałe i otrzymasz ostrzeżenie, jeśli spróbujesz użyć rozwiązania Laurence.

Aby to działało z Babel 6.24.1+, użyj babel-preset-envzamiast tego:

npm install babel-preset-env --save-dev

Następnie dodaj envdo ustawień wstępnych w .babelrc:

{
  "presets": ["env"]
}

Zobacz dokumentację Babel, aby uzyskać więcej informacji.

Krystyna
źródło
Czy można to zrobić za pomocą interfejsu CLI?
jcollum
5

Być może korzystasz z nieskompilowanych plików. Zacznijmy czysto!

W swoim katalogu roboczym utwórz:

  • Dwa foldery. Jeden dla wstępnie skompilowanego kodu es2015. Drugi dotyczy wyjścia Babel. Nazwiemy je odpowiednio „src” i „lib”.
  • Plik package.json z następującym obiektem:

    { 
      "scripts": {
          "transpile-es2015": "babel src -d lib"
      },
      "devDependencies": {
          "babel-cli": "^6.18.0",
          "babel-preset-latest": "^6.16.0"
      }
    }
  • Plik o nazwie „.babelrc” z następującymi instrukcjami: {"presets": ["latest"]}

  • Na koniec napisz kod testowy w pliku src / index.js. W Twoim przypadku: import co from 'co'.

Za pośrednictwem konsoli:

  • Zainstaluj swoje pakiety: npm install
  • Przeprowadź katalog źródłowy do katalogu wyjściowego z flagą -d (aka --out-dir), jak już określono w naszym pliku package.json: npm run transpile-es2015
  • Uruchom kod z katalogu wyjściowego! node lib/index.js
MarbinJavier
źródło
Nie działało niestety. Unexpected token import.
dipole_moment
1
Upewnij się, że babelpolecenie znajduje się na ścieżce wyszukiwania. Oto niewielka odmiana. package.json: {"scripts": {"transpile": "./node_modules/.bin/babel src -d lib"}, "devDependencies": {"babel-cli": "^ 6.24.1", "babel-preset- env ":" ^ 1.6.0 "}} .babelrc: {" presets ": [" env "]}
Maksim Yegorov
5

Obecna metoda polega na użyciu:

npm install --save-dev babel-cli babel-preset-env

A potem w środku .babelrc

{
    "presets": ["env"]
}

ta instalacja obsługuje Babel dla najnowszej wersji js (es2015 i późniejszych) Sprawdź babeljs

Nie zapomnij dodać babel-nodedo skryptów package.jsonużywanych podczas uruchamiania pliku js w następujący sposób.

"scripts": {
   "test": "mocha",
    //Add this line to your scripts
   "populate": "node_modules/babel-cli/bin/babel-node.js" 
},

Teraz możesz npm populate yourfile.jsw terminalu.

Jeśli korzystasz z systemu Windows i uruchomiłeś błąd, polecenie wewnętrzne lub zewnętrzne nie zostało rozpoznane, użyj węzła przed skryptem w następujący sposób

node node_modules/babel-cli/bin/babel-node.js

Następnie npm run populate

Isaac Sekamatte
źródło
3

Musisz użyć babel-preset-env i nodemon do hot-reload.

Następnie utwórz plik .babelrc z poniższą zawartością:

{
  "presets": ["env"]
}

Na koniec utwórz skrypt w package.json:

"scripts": {
    "babel-node": "babel-node --presets=env",
    "start": "nodemon --exec npm run babel-node -- ./index.js",
    "build": "babel src -d dist"
  }

Lub po prostu użyj tej płyty grzewczej:

Boilerplate: node-es6

Priyanshu Chauhan
źródło
2
  • install -> "npm i --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0"

dalej w pliku package.json dodaj w skryptach „start”: „babel-node server.js”

    {
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "lodash": "^4.17.4",
    "mongoose": "^5.0.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

i utwórz plik babel w katalogu głównym „.babelrc”

    {
    "presets":[
        "es2015",
        "stage-0"
    ]
}

i uruchom npm start w terminalu

Lior Ben Josef
źródło
1

Aby rozwiązać problem, wykonaj następujące czynności:

1) Zainstaluj ustawienia CLI i env

$ npm install --save-dev babel-cli babel-preset-env

2) Utwórz plik .babelrc

{
  "presets": ["env"]
}

3) Skonfiguruj npm start w pakiecie.json

"scripts": {
    "start": "babel-node ./server/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

4) następnie uruchom aplikację

$ npm start
KARTHIKEYAN.A
źródło
0

Wykonałem następujące czynności, aby rozwiązać problem (skrypt ex.js)

problem

$ cat ex.js
import { Stack } from 'es-collections';
console.log("Successfully Imported");

$ node ex.js
/Users/nsaboo/ex.js:1
(function (exports, require, module, __filename, __dirname) { import { Stack } from 'es-collections';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:194:16)
    at bootstrap_node.js:618:3

rozwiązanie

# npm package installation
npm install --save-dev babel-preset-env babel-cli es-collections

# .babelrc setup
$ cat .babelrc
{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

# execution with node
$ npx babel ex.js --out-file ex-new.js
$ node ex-new.js
Successfully Imported

# or execution with babel-node
$ babel-node ex.js
Successfully Imported
nsaboo
źródło
0

@jovi wszystko, co musisz zrobić, to dodać plik .babelrc w następujący sposób:

{
  "plugins": [
    "transform-strict-mode",
    "transform-es2015-modules-commonjs",
    "transform-es2015-spread",
    "transform-es2015-destructuring",
    "transform-es2015-parameters"
  ]
}

i zainstaluj te wtyczki jako niezależne od npm.

następnie spróbuj ponownie babel-node ***. js. mam nadzieję, że to może ci pomóc.

高 建德
źródło
-4

W swojej aplikacji musisz zadeklarować require()moduły, nie używając słowa kluczowego „importuj”:

const app = require("example_dependency");

Następnie utwórz plik .babelrc:

{
"presets": [ 
    ["es2015", { "modules": false }]
]
}

Następnie w swoim pliku gulp zadeklaruj swoje require()moduły:

var gulp = require("gulp");
anycoloryoulike84
źródło