web-dev-qa-db-ja.com

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

Jsファイルで、私はrequireの代わりにimportを使っていました

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

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

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

191
jovi

バベルから6リリースノート:

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

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

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

または糸で

yarn add babel-preset-es2015 --dev

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

{
  "presets": ["es2015"]
}
196

モジュールが実装されるまでは、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/ を参照してください。

51
vincent mathew
  1. パッケージをインストールします。babel-corebabel-polyfillbabel-preset-es2015
  2. 次の内容の.babelrcを作成します。{ "presets": ["es2015"] }
  3. メインエントリファイルにimportステートメントを入れないでください。別のファイルを使用してください。例えば、app.jsおよびメインエントリファイルは、babelを他のものよりも先に機能させるためにbabel-core/registerbabel-polyfillを必要とします。それからあなたはapp.js where importステートメントを要求することができます。

例:

index.js

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

app.js

import co from 'co';

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

26
Adiono

babel-preset-es2015は現在廃止されており、Laurenceのソリューションを使用しようとすると警告が表示されます。

これをBabel 6.24.1以降で動作させるには、代わりにbabel-preset-envを使用してください。

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

それから.babelrcのプリセットにenvを追加します。

{
  "presets": ["env"]
}

詳しくは Babelのドキュメント をご覧ください。

14
kristina

現在の方法は次のとおりです。

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

そして.babelrcの中に

{
    "presets": ["env"]
}

このインストールBabelによるjsの最新バージョン(es2015以降)のサポートbabeljsをチェックする

次のようにjsファイルを実行するときは、babel-node内のスクリプトにpackage.jsonを追加することを忘れないでください。

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

これであなたは端末の中でnpm populate yourfile.jsできます。

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

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

それでnpm run populate

5
Isaac Sekamatte

react-nativeのプリセットを使用している場合は、インポートを受け入れます。

npm i babel-preset-react-native --save-dev

そしてそれをあなたの.babelrcファイルの中に置きます。

{
  "presets": ["react-native"]
}

プロジェクトのルートディレクトリに

https://www.npmjs.com/package/babel-preset-react-native

5
jde-chil

コンパイルされていないファイルを実行しているのかもしれません。きれいに始めましょう!

作業ディレクトリに次のものを作成します。

  • 2つのフォルダプリコンパイルされたes2015コード用のもの。もう1つはbabelの出力用です。それらをそれぞれ "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
  • Package.jsonで既に指定されているように、-d(別名--out-dir)フラグを使用して、ソースディレクトリを出力ディレクトリに変換します。npm run transpile-es2015
  • 出力ディレクトリからコードを実行してください。 node lib/index.js
5
MarbinJavier
  • インストール - > "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"
}

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

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

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

2
lior ben yosef

ホットリロードには、 babel-preset-env および nodemon を使用する必要があります。

次に、以下の内容で.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

この問題を解決するには、次の手順に従ってください。

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

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

2) .babelrc ファイルを作成してください。

{
  "presets": ["env"]
}

3)npm startを package.json に設定します。

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

4)アプリを起動する

$ npm start
1
KARTHIKEYAN.A

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

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

そしてnpmでこれらのプラグインをdevdependenceとしてインストールしてください。

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

1
高建德

私は問題を克服するために次のことをしました(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
nsaboo

まだ同じ問題を抱えている人は、以下の手順に従って修正する必要があります。

  1. Babel 7 @babel/core @babel/present-env @babel/nodeなどを使用します...
  2. 以下のコードを含むプロジェクトのルートディレクトリに.babelrcを追加します。
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
  1. 必ずローカルバージョンのbebelノード./node_modules/.bin/babel-node main.jsを使用してください

これで、import/exportステートメントを使用できるようになり、ハッキングが楽しくなります。

0
Ahmed M.Kamal