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

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

18
ไม่ได้เปิดใช้การสนับสนุนสำหรับไวยากรณ์การทดลอง 'classProperties' ในขณะนี้
ในขณะที่ฉันกำลังตั้งค่า React ภายในโครงการ Django ฉันพบข้อผิดพลาดนี้ ModuleBuildError ในการสร้างโมดูลล้มเหลว (จาก ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: การสนับสนุนสำหรับคลาสคุณสมบัติของไวยากรณ์ทดลอง 'ยังไม่ได้เปิดใช้งาน (17: 9): 15 | 16 | class BodyPartWrapper extends Component { > 17 | state = { | ^ 18 | 19 | …

7
“ คุณอาจต้องใช้ตัวโหลดที่เหมาะสมเพื่อจัดการไฟล์ประเภทนี้” ด้วย Webpack และ Babel
ฉันพยายามใช้ Webpack กับ Babel เพื่อรวบรวมเนื้อหา ES6 แต่ฉันได้รับข้อความแสดงข้อผิดพลาดต่อไปนี้: You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' นี่คือลักษณะการกำหนดค่า Webpack ของฉัน: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './index', output: { …

2
ES6 getter / setter พร้อมฟังก์ชั่นลูกศร
ฉันใช้ babel6 และสำหรับโครงการสัตว์เลี้ยงของฉันฉันกำลังสร้างกระดาษห่อหุ้มสำหรับ XMLHttpRequest สำหรับวิธีการที่ฉันสามารถใช้ได้: open = (method, url, something) => { return this.xhr.open(method, url, something); } แต่สำหรับฟังก์ชันลูกศรคุณสมบัติไม่ทำงาน งานนี้: get status() { return this.xhr.status; } แต่ฉันไม่สามารถใช้ get status = () => this.xhr.status; นี่คือเจตนา?

10
ไฟล์ Babel ถูกคัดลอกโดยไม่ถูกแปลง
ฉันมีรหัสนี้: "use strict"; import browserSync from "browser-sync"; import httpProxy from "http-proxy"; let proxy = httpProxy.createProxyServer({}); และฉันได้ติดตั้งbabel-coreและbabel-cliทั่วโลกผ่านทาง npm ประเด็นคือเมื่อฉันพยายามรวบรวมสิ่งนี้บนเทอร์มินัลของฉัน: babel proxy.js --out-file proxified.js ไฟล์ผลลัพธ์จะถูกคัดลอกแทนที่จะคอมไพล์ (ฉันหมายถึงมันเหมือนกับไฟล์ต้นฉบับ) ฉันพลาดอะไรไปที่นี่?

2
เหตุใด babel จึงเขียนฟังก์ชันที่นำเข้าใหม่เรียกไปที่ (0, fn) (…)
ให้ไฟล์อินพุตเช่น import { a } from 'b'; function x () { a() } บาเบลจะรวบรวมให้ 'use strict'; var _b = require('b'); function x() { (0, _b.a)(); } แต่เมื่อคอมไพล์ในโหมดหลวมการเรียกใช้ฟังก์ชันจะถูกส่งออกเป็น _b.a(); ฉันได้ทำการวิจัยเกี่ยวกับตำแหน่งที่เพิ่มตัวดำเนินการลูกน้ำด้วยความหวังว่าจะมีความคิดเห็นอธิบาย รหัสผู้รับผิดชอบสำหรับการเพิ่มมันเป็นที่นี่

5
Webpack babel 6 ES6 มัณฑนากร
ฉันมีโปรเจ็กต์ที่เขียนด้วย ES6 โดยมี webpack เป็นบันเดิลเลอร์ การถ่ายโอนข้อมูลส่วนใหญ่ทำงานได้ดี แต่เมื่อฉันพยายามรวมมัณฑนากรไว้ที่ใดก็ได้ฉันได้รับข้อผิดพลาดนี้: Decorators are not supported yet in 6.x pending proposal update. ฉันได้ตรวจสอบตัวติดตามปัญหาของ babel แล้วและไม่พบสิ่งใดในนั้นดังนั้นฉันจึงคิดว่าฉันใช้ผิด การกำหนดค่า webpack ของฉัน (บิตที่เกี่ยวข้อง): loaders: [ { loader: 'babel', exclude: /node_modules/, include: path.join(__dirname, 'src'), test: /\.jsx?$/, query: { plugins: ['transform-runtime'], presets: ['es2015', 'stage-0', 'react'] } } ] ฉันไม่มีปัญหากับสิ่งอื่นใดฟังก์ชันลูกศรการทำลายทุกอย่างทำงานได้ดีนี่เป็นสิ่งเดียวที่ใช้ไม่ได้ ฉันรู้ว่าฉันสามารถปรับลดรุ่นเป็น babel …

6
แปลง ES6 ซ้ำเป็น Array
สมมติว่าคุณมี Javascript ES6 ที่เหมือนอาร์เรย์ซึ่งคุณรู้ล่วงหน้าว่าจะมีความยาว จำกัด วิธีที่ดีที่สุดในการแปลงเป็น Javascript Array คืออะไร? เหตุผลในการทำเช่นนั้นคือไลบรารี js จำนวนมากเช่นขีดล่างและ lodash รองรับเฉพาะ Arrays ดังนั้นหากคุณต้องการใช้ฟังก์ชันใด ๆ บน Iterable ต้องแปลงเป็น Array ก่อน ใน python คุณสามารถใช้ฟังก์ชัน list () ได้ ES6 เทียบเท่าหรือไม่

17
Babel นำเข้าโทเค็นที่ไม่คาดคิดเมื่อเรียกใช้การทดสอบมอคค่า
โซลูชันที่นำเสนอในคำถามอื่น ๆ ที่เกี่ยวข้องเช่นการรวมค่าพรีเซ็ตที่เหมาะสม (es2015) ใน. babelrc ถูกนำไปใช้ในโครงการของฉันแล้ว ฉันมีสองโครงการ (ให้เรียกพวกเขาว่า A และ B) ซึ่งทั้งคู่ใช้ไวยากรณ์โมดูล ES6 ในโครงการ A ฉันกำลังนำเข้าโครงการ B ซึ่งติดตั้งผ่าน npm และอยู่ในโฟลเดอร์ node_modules เมื่อฉันเรียกใช้ชุดทดสอบสำหรับโครงการ A ฉันได้รับข้อผิดพลาด: SyntaxError: การนำเข้าโทเค็นที่ไม่คาดคิด ซึ่งนำหน้าด้วยบรรทัดรหัสที่ผิดพลาดจากโครงการ B: (ฟังก์ชัน (ส่งออกต้องการโมดูล __filename __dirname) {นำเข้า createBrowserHistory จาก 'history / lib / createBrowserHistory'; iife ดูเหมือนจะเป็นสิ่งที่ npm หรืออาจเกี่ยวข้องกับ babel เนื่องจากไฟล์ต้นฉบับของฉันมีเพียง "import createBrowserHistory จาก" …

10
ไฟล์ที่ตั้งไว้ล่วงหน้าไม่ได้รับอนุญาตให้ส่งออกวัตถุ
ฉันมีไฟล์ภาพหมุนที่ฉันต้องการรับindex.jsและสร้างblock.build.jsดังนั้นของฉันwebpack.config.jsคือ: var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'es2015'], plugins: ['transform-class-properties'] } } ] } }; module.exports = config; package.jsonซึ่งผมใช้อยู่ด้านล่าง: { "name": …

2
babel CLI คัดลอกไฟล์ nonjs
ฉันใช้คำสั่ง babel cli babel src --out-dir lib ในการคัดลอกสคริปต์ es6 จาก src ไปยัง lib อย่างไรก็ตามจะไม่คัดลอกไฟล์ css / scss ที่ฉันมีในโฟลเดอร์ src / มีวิธีทำให้คัดลอกด้วยหรือไม่?
90 babeljs 

7
UglifyJS โยนโทเค็นที่ไม่คาดคิด: คีย์เวิร์ด (const) ด้วย node_modules
โครงการขนาดเล็กที่ฉันเริ่มใช้โมดูลโหนด (ติดตั้งผ่านnpm ) ที่ประกาศconstตัวแปร การรันและทดสอบโปรเจ็กต์นี้ทำได้ดี แต่ browserify ล้มเหลวเมื่อดำเนินการ UglifyJS โทเค็นที่ไม่คาดคิด: คำหลัก (const) นี่คือไฟล์ Gulp ทั่วไปที่ฉันประสบความสำเร็จในการใช้สำหรับโครงการอื่น ๆ ที่ผ่านมาโดยไม่มีปัญหานี้ (เช่นไม่มีโมดูลโหนดนั้น) gulpfile.js 'use strict'; const browserify = require('browserify'); const gulp = require('gulp'); const source = require('vinyl-source-stream'); const derequire = require('gulp-derequire'); const buffer = require('vinyl-buffer'); const uglify = require('gulp-uglify'); const sourcemaps = require('gulp-sourcemaps'); const …

4
เพิ่มส่วนประกอบย่อยแบบไดนามิกใน React
เป้าหมายของฉันคือการเพิ่มส่วนประกอบแบบไดนามิกในเพจ / คอมโพเนนต์หลัก ฉันเริ่มต้นด้วยเทมเพลตตัวอย่างพื้นฐานเช่นนี้: main.js: var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(<App/>, document.body); ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId')); App.js: var App = React.createClass({ render: function() { return ( <div> <h1>App main component! </h1> <div id="myId">myId div</div> </div> ); } }); SampleComponent.js: var SampleComponent = React.createClass({ render: function() { return ( …

3
ไม่สามารถกำหนด () ค่าการส่งออกเริ่มต้นใน Babel 6.x
ใน Babel 5.x ฉันสามารถเขียนโค้ดต่อไปนี้: app.js export default function (){} index.js require('babel/register'); require('./app')(); จากนั้นฉันสามารถทำงานได้node index.jsโดยไม่มีข้อผิดพลาด อย่างไรก็ตามการใช้ Babel 6.x เรียกใช้รหัสต่อไปนี้ index.es6.js require('babel-core/register'); require('./app')(); ส่งผลให้เกิดข้อผิดพลาด ต้องใช้ (... ) ไม่ใช่ฟังก์ชัน ฉันอยากรู้ว่าทำไม?

4
ใช้ Babel-node ในการผลิตได้หรือไม่
ฉันได้พัฒนาไซต์โดยใช้ 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"

6
'Symbol' ไม่ได้กำหนดไว้ใน IE หลังจากใช้ babel
ฉันมีreactjsแอปที่เขียนโดยใช้มาตรฐาน ES6 และฉันใช้webpackเพื่อสร้างมัน webpackโหลดโมดูลใช้js babel-loaderเพื่อความเฉพาะเจาะจงฉันใช้แพ็คเกจเวอร์ชันต่อไปนี้: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 อย่างไรก็ตามหลังจากที่สร้างมัน IE 10 'Symbol' is undefinedให้ข้อผิดพลาดดังต่อไปนี้ ไม่babelควรจะกำหนดSymbol? มีการกำหนดค่าเฉพาะสำหรับwebpackหรือbabelต้องตั้งค่าเพื่อให้ใช้งานได้หรือไม่ ฉันใช้{stage: 0}การกำหนดค่าใน.babelrcไฟล์. ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมขอบคุณ!

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