“ นำเข้าโทเค็นที่ไม่คาดคิด” ใน Nodejs5 และ babel หรือไม่

ในไฟล์ js ฉันใช้การนำเข้าแทนที่จะต้องการ

import co from 'co';

และพยายามเรียกใช้โดยตรงโดย nodejs เนื่องจากมันกล่าวว่าการนำเข้าคือ 'คุณสมบัติการจัดส่งสินค้า' และการสนับสนุนโดยไม่มีการตั้งค่าสถานะรันไทม์ ( 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

ยังคงมีข้อผิดพลาดเดียวกันการนำเข้าโทเค็นที่ไม่คาดคิด?

ฉันจะกำจัดมันได้อย่างไร

จากบันทึกประจำรุ่นของ Babel 6:

เนื่องจาก Babel มุ่งเน้นไปที่การเป็นแพลตฟอร์มสำหรับการสร้างเครื่องมือจาวาและไม่ใช่ทรานสปอนเดอร์ ES2015 เราจึงตัดสินใจเลือกใช้ปลั๊กอินทั้งหมด ซึ่งหมายความว่าเมื่อคุณติดตั้ง Babel มันจะไม่ transpile รหัส 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คุณสามารถบันทึกไฟล์ .abelrc โดย:

{
  "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-polyfillเพื่อให้ Babel ทำงานแยกกันตั้งแต่แรกก่อนอื่น จากนั้นคุณสามารถกำหนด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 เลิกใช้แล้วและคุณจะได้รับคำเตือนหากคุณพยายามใช้โซลูชันของ Laurence

หากต้องการใช้งาน 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
• โอนย้ายไดเรกทอรีต้นทางของคุณไปยังไดเรกทอรีผลลัพธ์ด้วยแฟล็ก -d (aka --out-dir) ซึ่งระบุไว้ใน package.json ของเรา: npm run transpile-es2015
• เรียกใช้รหัสของคุณจากไดเรกทอรีผลลัพธ์! node lib/index.js

วิธีปัจจุบันคือการใช้:

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

แล้วในค่ะ .babelrc

{
    "presets": ["env"]
}

การติดตั้ง Babel นี้รองรับ 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อยู่ในอาคารผู้โดยสาร

หากคุณกำลังเรียกใช้ windows และการเรียกใช้ข้อผิดพลาดภายในหรือภายนอกไม่รู้จักให้ใช้โหนดหน้าของสคริปต์ดังนี้

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

แล้วก็ npm run populate

คุณต้องใช้babel-preset-envและnodemonสำหรับ hot-reload

จากนั้นสร้างไฟล์ .abelrc ด้วยเนื้อหาด้านล่าง:

{
  "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"
}

และสร้างไฟล์สำหรับ babel ในรูท ".babelrc"

    {
    "presets":[
        "es2015",
        "stage-0"
    ]
}

และเรียกใช้ npm start ในเทอร์มินัล

เกี่ยวข้องกับขั้นตอนต่อไปนี้เพื่อแก้ไขปัญหา:

1) ติดตั้งCLI และ env ที่ตั้งไว้ล่วงหน้า

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

2) สร้างไฟล์. babelrc

{
  "presets": ["env"]
}

3) กำหนดค่าเริ่มต้น npm ใน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

@jovi สิ่งที่คุณต้องทำคือเพิ่มไฟล์ .abelrc เช่นนี้:

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

และติดตั้งปลั๊กอินเหล่านี้ในรูปแบบของการพึ่งพา npm

จากนั้นลอง babel-node ***. js อีกครั้ง หวังว่านี่จะช่วยคุณได้

ในแอปของคุณคุณต้องประกาศrequire()โมดูลของคุณโดยไม่ใช้คำหลัก 'นำเข้า':

const app = require("example_dependency");

จากนั้นสร้างไฟล์. babelrc:

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

จากนั้นในไฟล์ gulpfile ให้แน่ใจว่าได้ประกาศrequire()โมดูลของคุณ:

var gulp = require("gulp");