ใช้ Babel-node ในการผลิตได้หรือไม่


87

ฉันได้พัฒนาไซต์โดยใช้ babel-node และ browserify ด้วย babelify transform เพื่อรองรับไวยากรณ์ ES6

ฉันแค่สงสัยว่าฉันสามารถเรียกใช้สิ่งนี้ในการผลิต babel-node server แทนที่จะ เป็นnode server ตัวเลือกอื่นใดที่ฉันต้องรัน ES6 ในโหนด

นี่คือคำสั่งที่ฉันกำลังเรียกใช้เพื่อสร้างและเริ่มต้นในการพัฒนา

// npm run build
browserify -t [babelify] client.js > public/js/bundle.js",

// npm start
babel-node server.js"

นี่คือการพึ่งพานักพัฒนาของฉัน

"babel": "^4.0.1",
"babelify": "^5.0.3",
"browserify": "^8.0.3"

คำตอบ:


116

สำหรับโค้ดฝั่งไคลเอ็นต์คุณกำลังทำสิ่งที่ถูกต้อง babelifyและจัดส่งให้กับลูกค้า


สำหรับโค้ดฝั่งเซิร์ฟเวอร์ฉันจะสร้างแบบปกติโดยใช้babel-cli

ตามhttp://babeljs.io/docs/setup/#babel_register , babel-registerจะไม่ได้หมายถึงการใช้การผลิต - เดอะต้องเบ็ดขอแนะนำหลักสำหรับกรณีที่เรียบง่าย

สำหรับ Babel 6+

ตั้งแต่ Babel 6 จะไม่มีการแปลงรวมเป็นค่าเริ่มต้น ดังนั้นขอเริ่มต้นโดยการติดตั้งและbabel-clibabel-preset-es2015

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

เพิ่มการแปลง.babelrcไฟล์ของคุณ- นี่คือโมดูล perst ที่เราดาวน์โหลดด้านบน ดูรายการค่าที่ตั้งล่วงหน้าทั้งหมดเพื่อดูว่ารายการใดเหมาะสมกับคุณมากที่สุด

{
  "presets": ["es2015"]
}

เพิ่มbuildสคริปต์ในpackage.jsonไฟล์. ด้านล่างนี้srcคือไฟล์อินพุตของคุณและbuildเป็นไฟล์เอาต์พุตที่แปลงแล้ว

"scripts": {
  "build": "babel src -d build"
}

แล้วสร้างมัน!

$ npm run build

จากนั้นเรียกใช้รหัสของคุณ ณ จุดนี้คุณจะต้องเรียกใช้ไฟล์ในbuildไดเรกทอรีของคุณ

$ npm start

สำหรับ Babel <= 5 ให้ใช้ตะขอที่ต้องการ

require("babel/register");

ไฟล์ทั้งหมดที่ตามมาต้องตามโหนดกับนามสกุล.es6 , .es , .jsxและ.jsจะถูกเปลี่ยนโดยบาเบล polyfillยังเป็นสิ่งจำเป็นโดยอัตโนมัติ

คุณจะสามารถเก็บไฟล์ต้นฉบับของคุณไว้ใน ES6 แต่ยังคงดำเนินการโดยใช้ไฟล์ node server.js


ตามความคิดเห็นของคุณดูเหมือนว่าคุณจะมีปัญหาเล็กน้อย ให้ความสนใจเป็นพิเศษกับส่วนที่เน้นสีเหลืองด้านบน ไฟล์แรกของคุณต้องเป็น ES5 เท่านั้นซึ่งรันโดยโหนดเอง ความต้องการที่ตามมาทั้งหมดจะถูกเปลี่ยนโดย Babel ...

นี่คือลักษณะของการตั้งค่าทั่วไป

เซิร์ฟเวอร์ js

// only ES5 is allowed in this file
require("babel/register");

// other babel configuration, if necessary

// load your app
var app = require("./app.js");

app.js

// this file will be loaded through babel
// you can now use ES6 here and in every other include

จุดไฟ!

$ node server.js

9
อันที่จริงฉันเพิ่งลองสิ่งนี้ใส่require("babel/register");เซิร์ฟเวอร์ js ของฉันและเมื่อฉันเรียกใช้node server.jsฉันได้รับข้อผิดพลาด: Unexpected reserved word: import ... ดูเหมือนว่าจะไม่ทำงาน
svnm

1
@steveniseki การอัปเดตของฉันควรแสดงให้เห็นถึงวิธีการเริ่มต้นใช้งาน
ขอบคุณ

ยอดเยี่ยมขอบคุณมากสำหรับสิ่งนั้นฉันคิดว่าน่าจะเป็นเช่นนั้นจริง ๆ และพยายามสร้าง server.js ทั้งหมดใน ES5 แต่ดูเหมือนจะไม่ได้ผลอย่างไรก็ตามโซลูชันนี้ดีกว่ามากในการผลักแอปไปยัง app.js และทำงานได้อย่างสมบูรณ์แบบ ขอบคุณ
svnm

ตัวอย่างโปรเจ็กต์ที่ตอนนี้ใช้งานได้กับ node server.js :) อยู่ที่นี่หากใครสนใจดูตัวอย่าง เป็นตัวอย่างการใช้ react router, babel และ alt ซึ่งฉันจะใช้สำหรับไซต์จริง
svnm

4
ในขณะเดียวกันก็เปลี่ยนเป็นต้องการ ("babel-register"); .. อย่างไรก็ตามฉันได้รับ "การนำเข้าโทเค็นที่ไม่คาดคิด" ..
smotru

54

ฉันเพิ่งเขียนบล็อกโพสต์ในหัวข้อนี้

เอกสาร Babeljs CLIเตือนสิ่งต่อไปนี้:

babel-node ไม่ได้มีไว้สำหรับการใช้งานจริง

คุณไม่ควรใช้ babel-node ในการผลิต มีการใช้งานหน่วยความจำสูงโดยไม่จำเป็นเนื่องจากแคชถูกเก็บไว้ในหน่วยความจำ นอกจากนี้คุณจะพบกับบทลงโทษด้านประสิทธิภาพการเริ่มต้นอยู่เสมอเนื่องจากต้องรวบรวมแอปทั้งหมดในทันที

นี่คือตัวอย่างของวิธีที่คุณสามารถตั้งค่าสคริปต์ npm เพื่อเรียกใช้แอปของคุณด้วยโหนดแทน babel-node

"scripts": {
  "clean": "rm -rf build && mkdir build",
  "build-css": "node-sass scss/app.scss public/css/app.css",
  "build-server": "babel -d ./build ./server -s",
  "build": "npm run clean && npm run build-css && npm run build-server",
  "lint": "eslint source/ --quiet",
  "start": "node ./build/index.js",
  "debug": "node --debug ./build/index.js",
  "test": "for i in $(ls tests/); do babel-node \"./tests/${i}\" | faucet ; done",
  "validate": "npm run lint; npm run test && npm outdated --depth 0"
},

คุณสามารถดูรายละเอียดเพิ่มเติมได้ในบล็อกโพสต์


3
เนื่องจาก Node 4.0 รองรับ ES6 เรายังต้องใช้ babel เพื่อรวบรวมโค้ดหรือไม่?
lvarayut

8
@LVarayut ใช่ขึ้นอยู่กับคุณสมบัติ Babel ยังคงต้องการฝั่งเซิร์ฟเวอร์ โหนด v4.0.0 ไม่รองรับคุณสมบัติ ES6 ทั้งหมด (โดยเฉพาะโมดูลผ่านไวยากรณ์การนำเข้า / ส่งออก) ดูnodejs.org/en/docs/es6สำหรับข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อหรือพิมพ์ node --v8-options | grep "อยู่ระหว่างดำเนินการ" ในเทอร์มินัลเพื่อรับรายการคุณสมบัติ ES6 ที่ยังไม่ได้ใช้งาน
jbmusso

@jbmusso ขอบคุณสำหรับคำอธิบายที่ยอดเยี่ยม :)
lvarayut

14
Babel ไม่ได้มีไว้สำหรับ ES6 เท่านั้น แต่สำหรับ ESNext .. ดังนั้นมันจึงเพิ่มคุณสมบัติจาก ES7 อย่างต่อเนื่องและล่าสุดทันทีที่พวกเขาตัดสินในข้อกำหนด TC39
cuadraman

15

สิ่งสำคัญคือต้องชั่งน้ำหนักข้อดีข้อเสียของการใช้ babel-node ในการผลิต

  • babel-nodeเพิ่มระหว่างครึ่งวินาทีถึงหนึ่งวินาทีให้กับต้นทุนเริ่มต้นบนฮาร์ดแวร์สินค้าโภคภัณฑ์ แต่หากแอปของคุณเป็นเซิร์ฟเวอร์ที่ใช้งานได้ยาวนานต้นทุนการเริ่มต้นนั้นจะไม่สำคัญมากนัก
  • ลองวัดปริมาณการใช้หน่วยความจำเพิ่มเติม ตัวอย่างเช่นแอปของฉัน (การอ่านและประมวลผลข้อมูลอนุกรมเวลา) มีขนาดเพียง 20MB สิ่งนี้อาจสำคัญหรือไม่ก็ได้ทั้งนี้ขึ้นอยู่กับสถานการณ์ของคุณ

ในทางกลับกัน,

  • การใช้ babel-node ช่วยลดความยุ่งยากในการพัฒนาโดยตรง - คุณไม่จำเป็นต้องใช้สคริปต์ "build" และคุณจะไม่มีไดเร็กทอรีsrc/ libและdistไดเร็กทอรีแยกต่างหาก
  • ถ้าคุณimportจากไฟล์ในเครื่องคุณจะนำเข้าจากsrc/myutilsหรือจากlib/myutils? การใช้babel-nodeช่วยขจัดปัญหานั้น

ฉันใช้ Babel สำหรับการสนับสนุนโมดูลเท่านั้น ตอนนี้ V8 เพิ่งเปิดตัวการรองรับโมดูลเมื่อวันที่ 10 มกราคม 2017 หวังว่าเราจะเห็นโมดูลรองรับใน Node ภายใต้แฟล็กในอีกไม่กี่เดือนโดยแสดงเหตุผลของฉันในการใช้ Babel moot


8

คำตอบของ @ cuadraman แม่นยำกว่า @naomik

หากต้องการตอบคำถามของคุณสั้น ๆ : ไม่คุณbabel-nodeไม่ควรเรียกร้องโดยชัดแจ้ง เป็นห้องสมุดส่วนตัวที่บริโภคโดยbabel-nodebabel-cli

อย่างเป็นทางการของการกวดวิชามีทุกสิ่งที่คุณต้องการที่จะได้รับและทำงานบนโหนด (ไม่ใช่เบราว์เซอร์ด้าน!): https://github.com/babel/example-node-server อ่านเลย! ฉันพบบทแนะนำเกี่ยวกับบล็อกที่ทำให้เข้าใจผิดมากมายซึ่งใช้วิธีการรอบ ๆ และพบว่าบทความนี้ง่ายที่สุดในการติดตาม

โบนัส: ตรงกันข้ามกับสิ่งที่หลาย ๆ คนคิดว่าสามารถติดตั้งเวทมนตร์ทั้งหมดในเครื่องได้ (โดยใช้npm install --save-dev babel-cli nodemon babel-preset-es2015 babel-preset-stage-2) ไม่จำเป็นต้องติดตั้ง Babel หรือโมดูลตัวช่วยใด ๆ ทั่วโลก! สวยดี

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.