คำถามติดแท็ก babeljs

Babel (เดิมคือ 6to5) เป็นคอมไพเลอร์ JavaScript มันแปลงรหัส ES6 + / ES2015 เป็นรหัส ES5

10
การใช้ Node.js ต้องการกับการนำเข้า / ส่งออก ES6
ในโครงการที่ฉันร่วมมือกันเรามีสองตัวเลือกสำหรับระบบโมดูลที่เราสามารถใช้ได้: การนำเข้าโมดูลการใช้requireและการส่งออกโดยใช้และmodule.exportsexports.foo การนำเข้าโมดูลโดยใช้ ES6 importและการส่งออกโดยใช้ ES6export มีประโยชน์ด้านประสิทธิภาพการใช้หนึ่งมากกว่าอีก มีอะไรอีกบ้างที่เราควรรู้ถ้าเราจะใช้โมดูล ES6 เหนือโหนด

30
Babel 6 regeneratorRuntime ไม่ได้ถูกกำหนดไว้
ฉันกำลังพยายามใช้ async รอตั้งแต่เริ่มต้นที่ Babel 6 แต่ฉันไม่ได้กำหนด regeneratorRuntime .babelrc ไฟล์ { "presets": [ "es2015", "stage-0" ] } ไฟล์ package.json "devDependencies": { "babel-core": "^6.0.20", "babel-preset-es2015": "^6.0.15", "babel-preset-stage-0": "^6.0.15" } ไฟล์. js "use strict"; async function foo() { await bar(); } function bar() { } exports.default = foo; ใช้งานได้ตามปกติโดยไม่ต้องใช้ async / await ทำงานได้ดี …

11
เรียก async / ฟังก์ชั่นที่รอคอยในแบบคู่ขนาน
เท่าที่ฉันเข้าใจใน ES7 / ES2016 การใส่รหัสหลายรายการawaitจะทำงานคล้ายกับการผูกมัด.then()กับสัญญาซึ่งหมายความว่าพวกเขาจะดำเนินการอย่างใดอย่างหนึ่งหลังจากที่อื่นมากกว่าใน Parallerl ตัวอย่างเช่นเรามีรหัสนี้: await someCall(); await anotherCall(); ฉันเข้าใจถูกต้องหรือไม่ว่าanotherCall()จะถูกเรียกเมื่อsomeCall()เสร็จสิ้นเท่านั้น อะไรคือวิธีที่สวยงามที่สุดในการโทรหาพวกเขาในแบบคู่ขนาน? ฉันต้องการใช้มันในโหนดดังนั้นอาจมีวิธีแก้ปัญหาด้วยไลบรารี async หรือไม่? แก้ไข: ฉันไม่พอใจกับวิธีแก้ปัญหาที่ให้ไว้ในคำถามนี้: การชะลอตัวเนื่องจากการรอคอยสัญญาแบบไม่ต่อเนื่องในเครื่องกำเนิดไฟฟ้า asyncเนื่องจากมันใช้เครื่องกำเนิดไฟฟ้าและฉันกำลังถามกรณีการใช้งานทั่วไปมากกว่า

6
ฉันจะสร้างซอร์สโค้ดได้อย่างไรเมื่อใช้ Babel และ webpack
ฉันใหม่กับ webpack และฉันต้องการมือในการตั้งค่าเพื่อสร้างซอร์สแผนที่ ฉันทำงานwebpack serveจากบรรทัดคำสั่งซึ่งรวบรวมได้สำเร็จ แต่ฉันต้องการซอร์สแผนที่จริงๆ webpack.config.jsนี้เป็นของฉัน var webpack = require('webpack'); module.exports = { output: { filename: 'main.js', publicPath: '/assets/' }, cache: true, debug: true, devtool: true, entry: [ 'webpack/hot/only-dev-server', './src/components/main.js' ], stats: { colors: true, reasons: true }, resolve: { extensions: ['', '.js', '.jsx'], alias: { 'styles': __dirname + …

5
การส่งออก / นำเข้า ES6 ในไฟล์ดัชนี
ขณะนี้ฉันกำลังใช้ ES6 ในแอป React ผ่าน webpack / babel ฉันใช้ไฟล์ดัชนีเพื่อรวบรวมส่วนประกอบทั้งหมดของโมดูลและส่งออก น่าเสียดายที่มีลักษณะเช่นนี้: import Comp1_ from './Comp1.jsx'; import Comp2_ from './Comp2.jsx'; import Comp3_ from './Comp3.jsx'; export const Comp1 = Comp1_; export const Comp2 = Comp2_; export const Comp3 = Comp3_; ดังนั้นฉันจึงสามารถนำเข้าจากที่อื่นเช่นนี้: import { Comp1, Comp2, Comp3 } from './components'; เห็นได้ชัดว่านั่นไม่ใช่ทางออกที่ดีมากดังนั้นฉันจึงสงสัยว่าถ้ามีวิธีอื่น ฉันดูเหมือนจะไม่สามารถส่งออกส่วนประกอบที่นำเข้าได้โดยตรง

4
Babel 6 เปลี่ยนวิธีการส่งออกเริ่มต้น
module.exports = exports["default"]ก่อนที่บาเบลจะเพิ่มบรรทัด มันไม่ทำเช่นนี้อีกต่อไป สิ่งนี้หมายความว่าอย่างไรก่อนที่ฉันจะทำ: var foo = require('./foo'); // use foo ตอนนี้ฉันต้องทำสิ่งนี้: var foo = require('./foo').default; // use foo ไม่ใช่เรื่องใหญ่โต (และฉันเดาว่านี่คือสิ่งที่ควรจะเป็นมาตลอด) ปัญหาคือฉันมีรหัสจำนวนมากซึ่งขึ้นอยู่กับวิธีการใช้งาน (ฉันสามารถแปลงส่วนใหญ่เป็นการนำเข้า ES6 แต่ไม่ใช่ทั้งหมด) ทุกคนสามารถให้คำแนะนำเกี่ยวกับวิธีการทำงานแบบเก่าโดยไม่ต้องผ่านโครงการของฉันและแก้ไขปัญหานี้ (หรือแม้แต่คำแนะนำในการเขียน codemod เพื่อทำสิ่งนี้จะค่อนข้างลื่น) ขอบคุณ! ตัวอย่าง: การป้อนข้อมูล: const foo = {} export default foo ผลลัพธ์ด้วย Babel 5 "use strict"; Object.defineProperty(exports, "__esModule", { value: true …

13
“ นำเข้าโทเค็นที่ไม่คาดคิด” ใน 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 ยังคงมีข้อผิดพลาดเดียวกันการนำเข้าโทเค็นที่ไม่คาดคิด? ฉันจะกำจัดมันได้อย่างไร

6
วิธีที่ถูกต้องในการนำเข้า lodash
ฉันมีคำติชมคำขอดึงด้านล่างเพียงแค่สงสัยว่าวิธีใดที่จะนำเข้า lodash ในแบบที่ถูกต้อง คุณควรที่จะนำเข้ามาจาก 'lodash / has' .. สำหรับเวอร์ชั่นก่อนหน้าของ lodash (v3) ซึ่งโดยตัวของมันเองค่อนข้างหนักเราควรนำเข้าโมดูล / ฟังก์ชั่น specidic เท่านั้นแทนที่จะนำเข้าทั้งห้องสมุด lodash ไม่แน่ใจเกี่ยวกับเวอร์ชั่นใหม่กว่า (v4) import has from 'lodash/has'; VS import { has } from 'lodash'; ขอบคุณ

4
วิธีการใช้ฟังก์ชั่นลูกศร (เขตข้อมูลชั้นสาธารณะ) เป็นวิธีการเรียน?
ฉันยังใหม่กับการใช้คลาส ES6 กับ React ก่อนหน้านี้ฉันผูกเมธอดของฉันกับวัตถุปัจจุบัน (แสดงในตัวอย่างแรก) แต่ ES6 อนุญาตให้ฉันผูกฟังก์ชันคลาสกับอินสแตนซ์ของคลาสด้วยลูกศรอย่างถาวรหรือไม่ (มีประโยชน์เมื่อผ่านเป็นฟังก์ชั่นการโทรกลับ) ฉันได้รับข้อผิดพลาดเมื่อฉันพยายามใช้พวกเขาเท่าที่คุณสามารถทำได้ด้วย CoffeeScript: class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); } ดังนั้นถ้าฉันจะส่งผ่านSomeClass.handleInputChangeไปเช่นsetTimeoutมันจะถูกกำหนดขอบเขตให้กับอินสแตนซ์ของชั้นเรียนไม่ใช่windowวัตถุ

8
“ ตัวสร้างรหัสได้ทำให้รูปแบบของไฟล์ [บางไฟล์] ช้าลงเนื่องจากเกินขนาดสูงสุด” 100KB“” หมายความว่าอย่างไร
ฉันเพิ่มแพ็กเกจ npm ใหม่ให้กับโครงการของฉันและต้องการมันในหนึ่งในโมดูลของฉัน ตอนนี้ฉันได้รับข้อความนี้จาก webpack build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB". มันหมายความว่าอะไร? ฉันจำเป็นต้องดำเนินการบ้างไหม?
165 webpack  babeljs 

11
การเข้าถึงคุณสมบัติที่ไม่ปลอดภัย (และการกำหนดเงื่อนไข) ใน ES6 / 2015
มีตัวnullดำเนินการ -safe property (การขยายพันธุ์ / การดำรงอยู่ของ null) ใน ES6 (ES2015 / JavaScript.next / Harmony) เช่น?.ในCoffeeScriptหรือไม่? หรือจะมีการวางแผนสำหรับ ES7 var aThing = getSomething() ... aThing = possiblyNull?.thing สิ่งนี้จะประมาณ: if (possiblyNull != null) aThing = possiblyNull.thing เป็นการดีที่โซลูชันไม่ควรกำหนด (แม้undefined) ให้กับaThingถ้าpossiblyNullเป็นnull

11
วิธีการเผยแพร่โมดูลที่เขียนใน ES6 ถึง NPM?
ฉันกำลังจะเผยแพร่โมดูลให้กับ NPM เมื่อฉันคิดเกี่ยวกับการเขียนใหม่ใน ES6 เพื่อพิสูจน์ในอนาคตและเรียนรู้ ES6 ฉันใช้ Babel เพื่อ transpile เป็น ES5 และทำการทดสอบ แต่ฉันไม่แน่ใจว่าจะดำเนินการอย่างไร: ฉันจะส่งสัญญาณและเผยแพร่โฟลเดอร์ผลลัพธ์ / ออกไปยัง NPM หรือไม่ ฉันจะรวมโฟลเดอร์ผลลัพธ์ใน repo Github ของฉันหรือไม่ หรือฉันจะรักษา 2 repos ซึ่งมี ES6 code + gulp script สำหรับ Github และอีกหนึ่งที่มี transpiled results + tests สำหรับ NPM กล่าวโดยย่อ: ฉันต้องใช้ขั้นตอนอะไรบ้างในการเผยแพร่โมดูลที่เขียนใน ES6 ถึง NPM ในขณะที่ยังคงอนุญาตให้ผู้ใช้เรียกดู / แยกรหัสต้นฉบับ

7
ฉันจะติดตั้งไลบรารี babel-polyfill ได้อย่างไร
ฉันเพิ่งเริ่มใช้ Babel เพื่อรวบรวมรหัสจาวาสคริปต์ของ ES6 ลงใน ES5 เมื่อฉันเริ่มใช้สัญญาดูเหมือนว่าจะไม่ทำงาน เว็บไซต์ของ Babel สนับสนุนสัญญาผ่าน polyfills ไม่มีโชคฉันพยายามเพิ่ม: require("babel/polyfill"); หรือ import * as p from "babel/polyfill"; ฉันจะได้รับข้อผิดพลาดต่อไปนี้ในการบูตแอพของฉัน: ไม่พบโมดูล 'babel / polyfill' ฉันค้นหาโมดูล แต่ดูเหมือนว่าฉันขาดพื้นฐานบางอย่างที่นี่ ฉันยังพยายามเพิ่ม NPM ครามเก่าและดี แต่ดูเหมือนว่ามันไม่ทำงาน จะใช้โพลีฟิลส์จากบาเบลได้อย่างไร?

14
ข้อผิดพลาดในการขยาย Javascript ด้วยไวยากรณ์ ES6 และ Babel
ฉันพยายามขยายข้อผิดพลาดด้วย ES6 และ Babel มันไม่ได้ผล class MyError extends Error { constructor(m) { super(m); } } var error = new Error("ll"); var myerror = new MyError("ll"); console.log(error.message) //shows up correctly console.log(myerror.message) //shows empty string วัตถุข้อผิดพลาดไม่เคยได้รับชุดข้อความที่ถูกต้อง ลองใน Babel REPL ตอนนี้ฉันได้เห็นวิธีแก้ปัญหาบางอย่างใน SO แล้ว ( ตัวอย่างเช่นที่นี่ ) แต่ทั้งหมดดูเหมือนจะไม่เป็น ES6-y ทำยังไงให้สวยแบบ ES6? (ที่ทำงานใน Babel)

1
อัปเกรดเป็น Babel 7: ไม่สามารถอ่านคุณสมบัติ 'การผูก' ของ null
ฉันเพิ่งอัปเกรดเป็นBabel 7 (จาก 6) โดยเรียกใช้คำสั่งเหล่านี้: npm remove babel-cli npm install --save-dev @babel/cli @babel/core @babel/preset-env นี่คือ.babelrcไฟล์ของฉัน: { "presets": ["env"] } จากนั้นฉันก็วิ่ง: babel js/src --out-dir js/dist และส่งผลให้: TypeError: Cannot read property 'bindings' of null at Scope.moveBindingTo (/xyz/node_modules/@babel/traverse/lib/scope/index.js:867:13) at BlockScoping.updateScopeInfo (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17) at BlockScoping.run (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12) at PluginPass.BlockStatementSwitchStatementProgram (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24) at newFn (/xyz/node_modules/@babel/traverse/lib/visitors.js:193:21) at NodePath._call (/xyz/node_modules/@babel/traverse/lib/path/context.js:53:20) …

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