programing

Nodejs5와 babel에서 "예상치 못한 토큰 가져오기"?

muds 2023. 10. 8. 10:24
반응형

Nodejs5와 babel에서 "예상치 못한 토큰 가져오기"?

js파일에서는 require 대신 import to를 사용했습니다.

import co from 'co';

그리고 import가 'runtime features'라고 해서 nodejs에서 직접 실행을 시도했고, runtime flag 없이 shipping을 했습니다(https://nodejs.org/en/docs/es6/), . 오류가 발생했습니다.

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

여전히 동일한 오류가 발생했습니다. 예상치 못한 토큰 가져오기?

어떻게 하면 없앨 수 있을까요?

바벨 6 릴리즈 노트에서:

바벨은 ES2015 트랜스필러가 아닌 자바스크립트 툴링 플랫폼에 집중하고 있기 때문에 모든 플러그인을 옵트인(opt-in)으로 결정했습니다.즉, Babel을 설치하면 ES2015 코드가 기본적으로 더 이상 변환되지 않습니다.

설정에서 es2015 preset을 설치했습니다.

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

또는 원사로

yarn add babel-preset-es2015 --dev

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

{
  "presets": ["es2015"]
}

모듈이 구현될 때까지 바벨 "트랜스필러"를 사용하여 코드를 실행할 수 있습니다.

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주 입력 파일에 있는 statement(문), 다른 파일 예:app.js메인 엔트리 파일이 필요합니다.babel-core/register그리고.babel-polyfill바벨을 다른 무엇보다도 먼저 따로따로 일을 시키기 위해서입니다.그러면 당신은 다음을 요구할 수 있습니다.app.js어디에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 문서를 참조하십시오.

react-native에 사전 설정을 사용하면 가져오기가 허용됩니다.

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

당신의 .babelrc 파일 안에 그것을 집어넣습니다.

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

프로젝트 루트 디렉터리에

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

압축되지 않은 파일을 실행하고 있는 것일 수 있습니다.깨끗하게 시작합시다!

작업 디렉토리에 다음을 만듭니다.

  • 폴더 두 개.하나는 2015년 코드를 미리 컴파일한 것입니다.나머지 하나는 바벨의 결과물입니다.src와 lib로 각각 이름을 짓겠습니다.
  • 꾸러미.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) 플래그를 사용합니다.json:npm run transpile-es2015
  • 출력 디렉토리에서 코드를 실행합니다!node lib/index.js

현재 방법은 다음과 같습니다.

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

엔 ㄴ.babelrc

{
    "presets": ["env"]
}

js의 최신 버전에 대한 이 설치 바벨 지원(es2015 이상)babeljs를 확인해보세요.

추가하는 것을 잊지 마십시오.babel-node에 있는 당신의 에.package.json을 실행할 때 js합니다.

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

이제 가능합니다.npm populate yourfile.js내부 터미널

window를 실행하고 있는데 오류 내부 또는 외부 명령이 인식되지 않으면 다음과 같이 스크립트 앞에 노드를 사용합니다.

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

그리고나서npm run populate

핫 리로드를 위해서는 babel-preset-envnodemon을 사용해야 합니다.

그런 다음 아래 내용으로 .babelrc 파일을 만듭니다.

{
  "presets": ["env"]
}

마지막으로 스크립트를 패키지로 만듭니다.json:

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

아니면 그냥 이 보일러 플레이트를 사용합니다.

보일러 플레이트 : node-es6

  • install --> "npmi --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0"

그다음에 꾸러미로.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"
    ]
}

그리고 터미널에서 runnpm start in terminal

문제를 해결하기 위해 다음 단계를 포함합니다.

1) CLI env preset 설치

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

2) .babelrc 파일 만들기

{
  "presets": ["env"]
}

3) npm start in package를 구성합니다.json

"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

@jobi는 다음과 같은 .babelrc 파일을 추가하기만 하면 됩니다.

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

그리고 이러한 플러그인을 npm 과의 devdependence로 설치합니다.

그런 다음 babel-node ***.js를 다시 시도합니다.이것이 당신에게 도움이 되기를 바랍니다.

의 를 require()' 모듈:'import'듈:

const app = require("example_dependency");

그런 다음 .babelrc 파일을 만듭니다.

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

그리고 의 꿀꺽꿀꺽 의 을 꼭 의.require()모듈:

var gulp = require("gulp");

언급URL : https://stackoverflow.com/questions/33604470/unexpected-token-import-in-nodejs5-and-babel

반응형