Nodejs5 및 babel에서 "예기치 않은 토큰 가져 오기"?

js 파일에서 필요 대신 가져 오기를 사용했습니다.

import co from 'co';

가져 오기가 '배송 기능'이고 런타임 플래그 ( https://nodejs.org/en/docs/es6/ ) 없이 지원한다고 nodejs에서 직접 실행하려고했지만 오류가 발생했습니다.

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

SyntaxError: Unexpected token import

그런 다음 babel을 사용하려고했습니다.

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

여전히 같은 오류가 발생했습니다. 예기치 않은 토큰 가져 오기?

어떻게 제거 할 수 있습니까?

babel 6 릴리스 노트에서 :

Babel은 ES2015 트랜스 필러가 아닌 JavaScript 툴링 플랫폼에 초점을 맞추고 있으므로 모든 플러그인을 옵트 인하기로 결정했습니다. 이것은 Babel을 설치할 때 더 이상 ES2015 코드를 더 이상 기본적으로 변환하지 않음을 의미합니다.

내 설정에서 es2015 사전 설정을 설치했습니다.

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

또는 원사

yarn add babel-preset-es2015 --dev

내 .babelrc에서 사전 설정을 활성화했습니다.

{
  "presets": ["es2015"]
}

모듈이 구현 될 때까지 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/

1. 패키지를 설치합니다 : babel-core, babel-polyfill,babel-preset-es2015
2. .babelrc내용으로 작성 :{ "presets": ["es2015"] }
3. import메인 엔트리 파일 에 문장을 넣지 말고 다른 파일을 사용하십시오. 예를 들어 app.js메인 엔트리 파일이 필요 babel-core/register하고 babel-polyfillbabel이 다른 곳보다 먼저 우선적으로 작동하도록하십시오. 그런 다음 app.jswhere import문을 요구할 수 있습니다 .

예:

index.js

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

app.js

import co from 'co';

작동합니다 node index.js.

babel-preset-es2015 로렌스 솔루션을 사용하려고하면 경고 메시지가 표시됩니다.

Babel 6.24.1+에서이 작업을 수행하려면 babel-preset-env대신 다음을 사용하십시오 .

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

그런 다음에 env사전 설정에 추가 하십시오 .babelrc.

{
  "presets": ["env"]
}

자세한 내용 은 Babel 문서 를 참조하십시오.

반응 네이티브에 대한 사전 설정을 사용하면 가져 오기를 수락합니다.

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

.babelrc 파일 안에 넣습니다.

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

프로젝트 루트 디렉토리에

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

컴파일되지 않은 파일을 실행 중일 수 있습니다. 깨끗하게 시작합시다!

작업 디렉토리에서 다음을 작성하십시오.

• 두 개의 폴더 사전 컴파일 된 es2015 코드를위한 것입니다. 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

현재 방법은 다음을 사용하는 것입니다.

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

그리고 안으로 .babelrc

{
    "presets": ["env"]
}

이 설치는 최신 버전의 js (es2015 이상)에 대한 Babel 지원을 제공합니다.

다음과 같이 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터미널 내부에서 할 수 있습니다 .

창을 실행 중이고 내부 또는 외부 명령이 인식되지 않는 오류가 발생하면 다음과 같이 스크립트 앞의 노드를 사용하십시오.

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

그때 npm run populate

핫 리로드 를하려면 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

• 설치-> "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) 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

문제를 극복하기 위해 다음을 수행했습니다 (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

@ jovi 당신이해야 할 일은 다음과 같이 .babelrc 파일을 추가하는 것입니다.

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

이 플러그인을 npm과 함께 독자적으로 설치하십시오.

그런 다음 babel-node ***. js를 다시 시도하십시오. 이것이 당신을 도울 수 있기를 바랍니다.

앱 require()에서 'import'키워드를 사용하지 말고 모듈을 선언해야합니다 .

const app = require("example_dependency");

그런 다음 .babelrc 파일을 작성하십시오.

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

그런 다음 gulpfile에서 require()모듈 을 선언하십시오 .

var gulp = require("gulp");