Nodejs5とbabelでの「予期しないトークンのインポート」?


192

jsファイルでは、require toの代わりにimport toを使用しました

import co from 'co';

インポートは「出荷機能」であり、ランタイムフラグなしでサポートされているため(https://nodejs.org/en/docs/es6/)、nodejsで直接実行しようとしましたが、エラーが発生しました

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

SyntaxError: Unexpected token import

それから私はバベルを使ってみました

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

とによって実行されます

babel-node js.js

まだ同じエラーが発生しますが、予期しないトークンのインポート?

どうすればそれを取り除くことができますか?


14
@FelixKling:リンクされた質問での回答は確かにこの質問にも回答しますが、この質問をその質問の複製として見るのは困難です。いずれにせよ、ここに記載された構文エラーが私が見たものと正確に一致したので、Googleがここに直接私を連れて来たので、これをここに置いてよかったです。私は正直に言って、OPがやや関連する質問を検索するのではなく、たまたま当てはまる答えを見つけてこれを投稿したことを嬉しく思います。
Scott Sauyet

3
npm i --save-dev babel-cli 私のために修正しました...
ChuckJHardy 2016年

2
これを重複としてマーク解除するために投票しましたが、これは別の質問だと思います。
TWR Cole

3
これは重複ではありません。私がポストしたいもう一つの解決策は、あなたがこのプラグインを持ってダブルチェックすることです.babelrc"transform-es2015-modules-commonjs"
Dan Dascalescu 2016年

7
重複は問題ありません(あるべきです)。それは人間が働く方法の重要な部分です。@ScottSauyetが言うことは理由の1つです。別の見方をした別の説明は別です。この「重複した狩り」全体は、何年もの間、正規の訪問者として私にとって非常に役に立たないと感じています。止まればいいのに。
Stijn de Witt 2017

回答:


202

babel 6リリースノートから:

BabelはJavaScriptツールのプラットフォームであり、ES2015トランスパイラーではないことに焦点を合わせているため、すべてのプラグインをオプトインすることにしました。つまり、Babelをインストールすると、デフォルトでES2015コードがトランスパイルされなくなります。

私のセットアップでは、es2015プリセットをインストールしました

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

または糸で

yarn add babel-preset-es2015 --dev

私の.babelrcでプリセットを有効にしました

{
  "presets": ["es2015"]
}

14
いい答えだ。残念ながら、まだrequire()を使用する必要があり、npmパッケージのインポートを使用できません。
Jagtesh Chadha

24
プリセットとbabel-node一緒に使っています。同じエラー。es2015react
FuzzY

3
動作しません。はい、必要ですが、インポートは機能しません。
still_dreaming_1

6
私にとっては簡単な修正でした。トンネルビジョンに巻き込まれて、コードを1つのreact / babelプロジェクトから別のes5プロジェクトに適合させ、同時にes6構文にアップグレードしようとしました。スクリプトの下のpackage.jsonで、「node run」を「babel-node run.js」に置き換えるのを忘れました。ええ、私は羊のように感じます。:)
joezen777 2016年

2
JSエコシステムはとても簡単
ロドリゴ

51

モジュールが実装されるまで、Babelの「transpiler」を使用してコードを実行できます。

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

その後

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

入力したくない--presets node6場合は、次の方法で.babelrcファイルを保存できます。

{
  "presets": [
    "node6"
  ]
}

https://www.npmjs.com/package/babel-preset-node6およびhttps://babeljs.io/docs/usage/cli/を参照してください


16
バベルの人々からの最新の推奨は、実行するのではなく、実行するポリフィルを検出するbabel- preset -envを使用することですbabel-preset-node*.babelrc使用:{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
Ronen氏

この後、エラーが発生し始めました(認識されないトークン '<'):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. パッケージをインストールします。babel-corebabel-polyfillbabel-preset-es2015
  2. .babelrc内容で作成:{ "presets": ["es2015"] }
  3. 入れないでくださいimport例えば、あなたのメインエントリファイルでステートメントを別のファイルを使用しますapp.jsし、あなたのメインのエントリファイルには、必要に応じなければならないbabel-core/registerbabel-polyfillバベルが何かする前に最初の場所で別々に動作させるために。次に、app.jswhere importステートメントを要求できます。

例:

index.js

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

app.js

import co from 'co';

で動作するはずnode index.jsです。


1
これは、開発に使用できる簡単な回避策です。ただし、本番環境では常にes5コードをコンパイルする必要があります。
Jonas Drotleff 2017年

待って...これは私が思うことですか?数か月前、私は、javascript / perl /任意の言語を、同じ言語で既存の言語をカスタムで追加解析することにより、更新なしで拡張できるという夢を見ました。これは何が起こっているのですか?
ドミトリー

すばらしい答えです。しかし、スクリプトでは、以下のようなものを置くことができます。したがって、どのファイルでも使用できます。"scripts":{"build": "babel src -d dist"、 "start": "node dist / index.js"}
gkarthiks 2018

15

babel-preset-es2015 は非推奨になり、Laurenceのソリューションを使用しようとすると警告が表示されます。

これをBabel 6.24.1以降で動作させるには、babel-preset-env代わりに次を使用します。

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

次にenv、のプリセットに追加します.babelrc

{
  "presets": ["env"]
}

詳細については、Babelのドキュメントを参照しください。


CLIでこれを行う方法はありますか?
jcollum


5

コンパイルされていないファイルを実行している可能性があります。きれいに始めましょう!

作業ディレクトリに以下を作成します。

  • 2つのフォルダー。コンパイル済みのes2015コード用。もう1つは、バベルの出力用です。それぞれ「src」と「lib」と名付けます。
  • 次のオブジェクトを含むpackage.jsonファイル:

    { 
      "scripts": {
          "transpile-es2015": "babel src -d lib"
      },
      "devDependencies": {
          "babel-cli": "^6.18.0",
          "babel-preset-latest": "^6.16.0"
      }
    }
  • 次の指示を含む「.babelrc」という名前のファイル: {"presets": ["latest"]}

  • 最後に、src / index.jsファイルにテストコードを記述します。あなたの場合: import co from 'co'.

コンソールから:

  • パッケージをインストールします。 npm install
  • -d(別名--out-dir)フラグを使用して、ソースディレクトリを出力ディレクトリにトランスパイルします。これは、すでに、package.jsonで指定されています。 npm run transpile-es2015
  • 出力ディレクトリからコードを実行してください! node lib/index.js

残念ながらうまくいきませんでした。Unexpected token import
dipole_moment

1
babelコマンドが検索パスにあることを確認してください。ここにわずかなバリエーションがあります。 package.json:{"スクリプト":{"トランスパイル": "./node_modules/.bin/babel src -d lib"}、 "devDependencies":{"babel-cli": "^ 6.24.1"、 "babel-preset- env ":" ^ 1.6.0 "}} .babelrc:{"プリセット ":[" env "]}
Maksim Yegorov

5

現在の方法は使用することです:

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

そして次に .babelrc

{
    "presets": ["env"]
}

これは、jsの最新バージョン(es2015以降)のBabelサポートをインストールします。

追加することを忘れないでください babel-nodepackage.json次のようにjsファイルを実行する場合は、使用中にスクリプトを。

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

これでnpm populate yourfile.jsターミナル内に入ることができます。

Windowsを実行していて、認識されないエラーの内部コマンドまたは外部コマンドを実行している場合は、次のようにスクリプトの前のノードを使用します。

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

その後 npm run populate


3

ホットリロードにはbabel- preset -envnodemonを使用する必要があります。

次に、以下の内容の.babelrcファイルを作成します。

{
  "presets": ["env"]
}

最後に、package.jsonにスクリプトを作成します。

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

または、この定型文を使用します。

ボイラープレート:node-es6


2
  • インストール-> "npm i --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0"

次にpackage.jsonファイルにスクリプト「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"
}

ルート「.babelrc」にbabelのファイルを作成します

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

ターミナルでnpm startを実行します


1

問題を解決するには、次の手順を実行します。

1)CLIとenvプリセットをインストールします

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

2).babelrcファイルを作成する

{
  "presets": ["env"]
}

3)package.jsonで npm startを構成します

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

4)次にアプリを起動します

$ npm start

0

問題を解決するために次のことを行いました(ex.jsスクリプト)

問題

$ 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

解決

# 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

0

@jovi必要なのは、次のような.babelrcファイルを追加することだけです。

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

これらのプラグインをnpmのdevdependencesとしてインストールします。

その後、もう一度babel-node ***。jsを試してください。これがお役に立てば幸いです。


-4

アプリではrequire()、「import」キーワードを使用せずに、モジュールを宣言する必要があります。

const app = require("example_dependency");

次に、.babelrcファイルを作成します。

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

次に、gulpfileで、必ずrequire()モジュールを宣言します。

var gulp = require("gulp");
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.