Node.js-SyntaxError : 예기치 않은 토큰 가져 오기

나는 무엇이 잘못되었는지 이해하지 못한다. 노드 v5.6.0 NPM v3.10.6

코드:

function (exports, require, module, __filename, __dirname) {
    import express from 'express'
};

오류:

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:140:18)
    at node.js:1001:3

업데이트 3 : 노드 13 부터는 .mjs 확장명을 사용하거나 package.json에서 "type": "module"을 설정할 수 있습니다. 당신은 하지 않는 사용에 필요한 --experimental-modules플래그를.

업데이트 2 : 노드 12 이후로 , .mjs확장을 사용하거나 "type": "module"package.json에서 설정할 수 있습니다. 그리고 --experimental-modules플래그로 node를 실행해야합니다 .

업데이트 : Node 9 에서는 플래그 뒤에서 활성화되며 .mjs확장을 사용합니다 .

node --experimental-modules my-app.mjs

import실제로 ES6의 일부 이지만 불행히도 기본적으로 NodeJS에서 아직 지원되지 않으며 브라우저에서 매우 최근에 지원되었습니다.

MDN 및 이 노드 문제 에 대한 브라우저 호환성 표를 참조하십시오 .

Node.js의 ES6 모듈에 대한 James M Snell의 업데이트 (2017 년 2 월) :

작업이 진행 중이지만 시간이 좀 걸릴 것입니다. 현재 최소 1 년 정도는보고 있습니다.

지원이 기본적으로 표시 될 때까지 다음과 같은 기본 require문구 를 계속 사용해야 합니다.

const express = require("express");

NodeJS에서 새로운 ES6 / 7 기능을 사용하려면 Babel을 사용하여 컴파일 할 수 있습니다. 다음은 예제 서버 입니다.

불행히도 Node.js는 import아직 ES6을 지원하지 않습니다 .

수행하려는 작업을 수행하려면 (Express 모듈 가져 오기)이 코드로 충분합니다.

var express = require("express");

또한 다음을 실행하여 Express를 설치했는지 확인하십시오.

$ npm install express

참고 항목 Node.js를 문서를 Node.js. 학습에 대한 자세한 내용은

다른 답변에서 언급했듯이 Node JS는 현재 ES6 가져 오기를 지원하지 않습니다.

(현재로서는 편집 2를 읽으십시오)

노드 js에서 ES6 가져 오기를 사용 하면이 문제에 대한 솔루션이 제공됩니다. 나는 이것을 시도했고 그것은 나를 위해 일했다.

다음 명령을 실행하십시오 :

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

이제 새 파일 (config.js)을 작성하고 다음 코드를 추가해야합니다.

    require('babel-register')({
        presets: [ 'env' ]
    })
    // Import the rest of our application.
    module.exports = require('./your_server_file.js')

이제 오류없이 import 문을 작성할 수 있습니다.

도움이 되었기를 바랍니다.

편집하다:

위 코드로 만든 새 파일을 실행해야합니다. 내 경우에는이었다 config.js. 그래서 나는 달려야합니다.

    node config.js

편집 2 :

실험 하면서이 문제에 대한 쉬운 해결책을 찾았습니다.

.babelrc프로젝트 루트에 파일을 작성 하십시오.

다음을 추가하십시오 (필요한 다른 babel 사전 설정을이 파일에 추가 할 수 있음).

    {
        "presets": ["env"]
    }

설치 babel-preset-env명령을 사용하여 npm install babel-preset-env --save다음 설치 babel-cli명령을 사용하여npm install babel-cli -g --save

이제 서버 또는 색인 파일이있는 폴더로 이동하여 다음을 사용하여 실행하십시오. babel-node fileName.js

또는 파일에 npm start다음 코드를 추가 하여 사용할 수 package.json있습니다.

    "scripts": {
        "start": "babel-node src/index.js"
    }

오류 : SyntaxError : 예기치 않은 토큰 가져 오기 또는 SyntaxError : 예기치 않은 토큰 내보내기

솔루션 : 모든 수입품을 예로 변경

const express               = require('express');
const webpack               = require('webpack');
const path                  = require('path');
const config                = require('../webpack.config.dev');
const open                  = require('open');

또한 귀하의 변경 export default = foo;에를module.exports = foo;

나는 충격 esm을받지 않았다. 이 작지만 강력한 패키지는 당신이 중 하나를 사용할 수 있습니다 import또는 require.

프로젝트에 esm 설치

$ npm install --save esm

esm을 사용하도록 노드 시작 스크립트 업데이트

node -r esm app.js

esm그냥 작동합니다. 나는 함께 시간의 톤을 낭비 .mjs하고 --experimental-modules만 찾아 .mjs이 사용하는 파일을 가져올 수 없습니다 파일 require또는 module.exports. 이것은 큰 문제 였지만 esm혼합하고 일치시킬 수 있으며 이해하기 만하면 esm됩니다.

여전히 "가져 오기"를 사용할 수없는 경우 여기에서 처리 한 방법입니다 : 노드 친화적 인 요구로 변환하십시오. 예:

import { parse } from 'node-html-parser';

와 같다:

const parse = require('node-html-parser').parse;

babel 7 제안서 개발자 의존성을 추가 할 수 있습니까?

npm i -D @babel/core @babel/preset-env @babel/register

루트에 .babelrc를 추가하십시오.

{
"presets": [
  [
    "@babel/preset-env",
    {
      "targets": {
        "node": "current"
     }
    }
  ]
 ]
}

.js 파일에 추가하십시오.

require("@babel/register")

또는 cli에서 실행하는 경우 require 후크를 -r @ babel / register로 사용할 수 있습니다 (예 :

$node -r @babel/register executeMyFileWithESModules.js

'babel'을 사용할 수 있다면 아래와 같이 package.json (-presets = es2015)에 빌드 스크립트를 추가하십시오. es2015로 가져 오기 코드를 사전 컴파일합니다

"build": "babel server --out-dir build --presets=es2015 && webpack"

Node.js v12부터 (현재는 상당히 안정적이지만 여전히 "실험적"으로 표시됨) Node.js에서 ESM ( E CMA S cript M odules) 을 사용하기위한 몇 가지 옵션이 있습니다 (파일의 경우 ) 문자열을 evaling에 대한 세 번째 방법은, 여기에 무슨 설명서를 말한다 :

--experimental-modules플래그는 ECMAScript를 모듈 (ES 모듈)에 대한 지원을 가능하게 할 수있다.

활성화되면 Node.js는 node초기 입력으로 전달 되거나 importES 모듈 코드 내의 명령문으로 참조 될 때 다음을 ES 모듈로 처리합니다 .

• 파일의 끝 .mjs.

• 끝나는 파일 .js또는 확장명이 파일 가장 가까운 부모 때 package.json파일이 최상위 필드 포함 "type"의 값을 "module".

• 문자열에 인수로 전달 --eval하거나 --print, 또는에 파이프 node를 통해 STDIN플래그와 함께 --input-type=module.

Node.js는 .js가장 가까운 상위 package.json파일에 최상위 "type" 필드 가없는 파일 또는 플래그가없는 문자열 입력 과 같은 다른 모든 유형의 입력을 CommonJS로 취급 합니다 --input-type. 이 동작은 이전 버전과의 호환성을 유지하기위한 것입니다. 그러나 Node.js는 CommonJS 및 ES 모듈을 모두 지원하므로 가능할 때마다 명시하는 것이 가장 좋습니다. Node.js는 node초기 입력으로 전달 되거나 importES 모듈 코드 내의 명령문으로 참조 될 때 다음을 CommonJS로 처리합니다 .

• 파일의 끝 .cjs.

• 끝나는 파일 .js또는 확장명이 파일 가장 가까운 부모 때 package.json파일이 최상위 필드 포함 "type"의 값을 "commonjs".

• 문자열에 인수로 전달 --eval하거나 --print, 또는에 파이프 node를 통해 STDIN플래그와 함께 --input-type=commonjs.

Express로 시작했을 때 항상 가져 오기를 사용하는 솔루션이 필요했습니다.

const express = require("express");
// to 
import express from "express"

많은 시간 이이 라인을 통과 : Unfortunately, Node.js doesn't support ES6's import yet.

이제 다른 사람들을 돕기 위해 여기에 새로운 두 가지 솔루션을 만듭니다.

1) esm :-

놀랍도록 간단하고, 바가없고, 번들이없는 ECMAScript 모듈 로더. 작동 시키자

  yarn add esm / npm install esm

start.js를 만들거나 네임 스페이스를 사용하십시오.

 require = require("esm")(module/*, options*/)
 // Import the rest of our application.
 module.exports = require('./src/server.js')
 // where server.js is express server start file

package.josn패스 경로 변경start.js

  "scripts": {
    "start": "node start.js",
    "start:dev": "nodemon start.js",
  },
  "dependencies": {
+    "esm": "^3.2.25",
  },
  "devDependencies": {
+   "nodemon": "^1.19.2"
  }

2) 바벨 js :-

이것은 두 부분으로 나눌 수 있습니다

a) timonweb.com 덕분에 솔루션 1

b) 해결책 2

사용 바벨 (6) (이전 버전 바벨 - 사전 단계-3 ^ 6.0 생성) .babelrc루트 폴더에 파일을

{
    "presets": ["env", "stage-3"]
}

babel-preset-stage-3 설치

yarn add babel-cli babel-polyfill babel-preset-env bable-preset-stage-3 nodemon --dev

package.json의 변경

"scripts": {
+   "start:dev": "nodemon --exec babel-node -- ./src/index.js",
+   "start": "npm run build && node ./build/index.js",
+   "build": "npm run clean && babel src -d build -s --source-maps --copy-files",
+   "clean": "rm -rf build && mkdir build"
},
"devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "nodemon": "^1.19.4"
},

서버를 시작하십시오

yarn start / npm start

우린 새로운 문제를 만들어

regeneratorRuntime.mark(function _callee(email, password) {
^
ReferenceError: regeneratorRuntime is not defined

이 오류는 코드에서 async / await를 사용할 때만 발생합니다. 그런 다음 사용자 정의 재생기 런타임 및 core-js가 포함 된 polyfill을 사용하십시오. 위에 추가index.js

import "babel-polyfill"

이를 통해 async / await를 사용할 수 있습니다

바벨 7 사용

프로젝트의 모든 것을 최신 상태로 유지해야 babel 7 .babelrc로 시작하십시오.

{
  "presets": ["@babel/preset-env"]
}

package.json의 일부 변경

"scripts": {
+  "start:dev": "nodemon --exec babel-node -- ./src/index.js",
+  "start": "npm run build && node ./build/index.js",
+  "build": "npm run clean && babel src -d build -s --source-maps --copy-files",
+  "clean": "rm -rf build && mkdir build",
    ....
}
"devDependencies": {
+   "@babel/cli": "^7.0.0",
+   "@babel/core": "^7.6.4",
+   "@babel/node": "^7.0.0",
+   "@babel/polyfill": "^7.0.0",
+   "@babel/preset-env": "^7.0.0",
+   "nodemon": "^1.19.4"
....
}

사용할 import "@babel/polyfill"시작점에

import "@babel/polyfill"
import express from 'express'
const app = express()

//GET request
app.get('/', async (req, res) {
  // await operation
  res.send('hello world')
})
app.listen(4000, () => console.log('🚀 Server listening on port 400!'))

왜 생각하고 있니 start:dev

진심으로. 새로 온다면 좋은 질문입니다. 매번 시작 서버로 멧돼지마다 모든 변경 사항을 yarn start:dev자동으로 개발 서버 로 사용 하십시오.

필자의 경우 .babelrc파일 을 찾고 있었고 다음과 같은 내용을 포함해야합니다.

{
  "presets": ["es2015-node5", "stage-3"],
  "plugins": []
}