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/ 참조
- 패키지 설치:
babel-core
,babel-polyfill
,babel-preset-es2015
- 만들다
.babelrc
내용:{ "presets": ["es2015"] }
- 넣지않음
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-env와 nodemon을 사용해야 합니다.
그런 다음 아래 내용으로 .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"
}
아니면 그냥 이 보일러 플레이트를 사용합니다.
- 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
'programing' 카테고리의 다른 글
가운데 오버사이즈 이미지(Div) (0) | 2023.10.08 |
---|---|
Invoke-Rest 메서드: 반환 코드를 가져오려면 어떻게 해야 합니까? (0) | 2023.10.08 |
AngularJS에서 행을 각각 2개씩 더 반복하는 방법 (0) | 2023.10.08 |
레일 3 + angularjs + minization은 생산 시 작동하지 않습니다.알 수 없는 공급자: eProvider (0) | 2023.10.08 |
CoffeeScript에서 객체의 키와 값을 반복하는 방법? (0) | 2023.10.08 |