javascript - Node.js - 語法錯誤：意外的 import 標記

我不明白哪裡出了問題。Node 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

答案＃1

Node 13+ 自 Node 13 起，你可以使用 .mjs 擴展名，或在你的 package.json 中設置 {"type": "module"}。你 不需要 使用 --experimental-modules 標誌。模組在 Node.js 中現在被標記為穩定。

Node 12 自 Node 12 起，你可以使用 .mjs 擴展名，或者在你的 package.json 中設定 "type": "module"。而且你需要使用 --experimental-modules 標誌來運行 node。

節點 9 在節點 9 中，它在一個旗標後面啟用，並使用 .mjs 擴展名。

node --experimental-modules my-app.mjs

雖然 import 確實是 ES6 的一部分，但遺憾的是，它在 NodeJS 中預設尚不支援，而且直到最近才獲得瀏覽器的支援。

請參見 MDN 上的瀏覽器相容性表以及這個 Node 問題。

摘自 James M Snell 關於 Node.js 中 ES6 模組的更新（2017 年 2 月）:

工作正在進行中，但這將需要一些時間——我們目前至少預計大約一年。

直到原生支援出現（現在在 Node 13+ 標記為穩定），你將不得不繼續使用傳統的 require 語句：

const express = require("express");

如果你真的想在 NodeJS 中使用新的 ES6/7 功能，你可以使用 Babel 進行編譯。這裡有一個示例伺服器。

答案＃2

不幸的是，Node.js 尚未支援 ES6 的 import。

要完成你正在嘗試做的事情（導入 Express 模組），這段代碼應該就足夠了

var express = require("express");

此外，請確保您已透過執行指令安裝了 Express

npm install express

請參閱 Node.js 文檔以獲取有關學習 Node.js 的更多信息。

答案＃3

我很震驚 esm 沒有被提到。這個小巧但強大的套件允許你使用 import 或 require。

在你的專案中安裝 esm

$ npm install --save esm

更新你的 Node 啟動腳本以使用 esm

node -r esm app.js

esm 就是可以直接使用。我浪費了大量時間在 .mjs 和 --experimental-modules 上，結果才發現 .mjs 檔案無法匯入使用 require 或 module.exports 的檔案。這是個很大的問題，而 esm 允許你混合使用，並且它會自動處理……esm 就是可以直接使用。

答案＃4

如同其他答案所提到的，Node JS 目前不支持 ES6 的匯入。

（截至目前，請閱讀 EDIT 2）

在 Node.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')

現在你可以撰寫匯入語句而不會出現任何錯誤。

希望這對你有幫助。

編輯：

你需要運行你使用上述代碼創建的新檔案。在我的例子中，它是 config.js。所以我必須運行：

    node config.js

編輯 2：

在實驗的過程中，我找到了解決這個問題的一個簡單方法。

在專案的根目錄中建立 .babelrc 檔案。

添加以下內容（以及你需要的任何其他 babel 預設，可在此檔案中添加）:

    {
        "presets": ["env"]
    }

使用命令 npm install babel-preset-env --save 安裝 babel-preset-env，然後使用命令 npm install babel-cli -g --save 安裝 babel-cli

現在，前往你的伺服器或索引檔所在的資料夾，並使用以下指令執行：babel-node fileName.js

或者你可以透過在你的 package.json 文件中添加以下代碼，然後使用 npm start 來運行：

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

答案＃5

錯誤： SyntaxError: 意外的符號 import 或 SyntaxError: 意外的符號 export

解決方案：將你的所有匯入更改為範例

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;

答案＃6

如果你還是無法在這裡使用 "import"，我處理的方法是：只要將它翻譯成對 Node 友好的 require。例如：

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

與以下相同：

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

答案＃7

babel 7 提案 你能添加開發依賴嗎

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

並在根目錄中添加一個 .babelrc

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

並添加到 .js 文件中

require("@babel/register")

或者如果你在命令列介面中執行它，你可以使用 require 鉤子作為 -r @babel/register，例如。

$node -r @babel/register executeMyFileWithESModules.js

答案＃8

當我剛開始使用 Express 時，總是想要一個可以使用 import 而不是 require 的解決方案

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

很多時候會看到這行訊息：- 不幸的是，Node.js 尚未支援 ES6 的 import。

現在為了幫助他人，我在這裡創建了新的兩個解決方案

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) Babel js:-

這可以分為兩部分

a) 解決方案 1 感謝 timonweb.com

b) 解法 2

使用 Babel 6（舊版 babel-preset-stage-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 時發生。然後使用包含自訂 regenerator 運行時和 core-js 的 polyfill。添加在 index.js 的最上方

import "babel-polyfill"

這允許你使用 async/await

使用 Babel 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 作為開發伺服器，每次更改時伺服器會自動重啟，更多關於 nodemon 的資訊