babeljs

问题 I'm grokking my way through ES6 and I ran into Modules (nice!) and in learning, I am trying to see if I can use them in the browser without WebPack (which I haven't learned yet). So, I have the following files/folder structure in my JS directory js - lib (for complied es6 via Babel) - mods (compiled modules) - module.js (compiled via Babel) - app.js (imports modules, attached to index.html) - src (for "raw" es6) - mods (es6 modules) - module.js (es6 module) - app.js (imports modules) In js

问题 Here's my gulp task to compile my ES6 code into a single ES5 file. I use classes and modules ( import , export ) in ES6. gulp.src(paths.scripts) .pipe(sourcemaps.init()) .pipe(babel({ presets: ['es2015'] })) .pipe(concat('all.js')) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./www/js')); However, because Babel compiles ES6 import directives into require commands, and require will attempt to request a file, the request files are failing because all the ES5 code is concatted into one file,

问题 Can someone explain how Babel in React supports fat arrow functions as class properties? Using Babel Try it out I can see they are not supported: class Question { // Property (not supported) myProp = () => { return 'Hello, world!'; } // Method (supported) myFunc() { return 'Hello, world!'; } } Class properties are not supported in ES6 (correct me if I'm wrong) but then in React (with Babel) they work. I can see the difference between methods and properties using TypeScript Playground but I

问题 After reading the article Removing Babel's Stage Presets by babel , I still not fully understand how to add a proposal from, for example, stage-3 (flatMap) to .babelrc . As far as I understand, because flatMap can be written in ES5, then I need a polyfill and not a plugin. I installed @babel/polyfill under --save-dev but the browser still tells me that this method doesn't exist. I guess that @babel/polyfill doesn't cover experimental features. 回答1: flatMap was removed from @babel/polyfill for

问题 I was following a video tutorial from plural sight. Course name is "Building a Real-time App with React, Flux, Webpack, and Firebase". Please see below code and attached screen shot of the issue i am having. Webpack is failing when ever i try to re build the files. Can someone please advise of what that issue could be. I'm currently using all the latest libraries. /*webpack.config.js*/ module.exports = { entry: { main: [ './src/main.js' ] }, output: { filename: './public/[name].js' }, module:

问题 I am not able to setup babel correctly for the usage of async / await. I am using babel 7 and webpack 4. I do not want to use babel-polyfill if possible! My babelrc file: { "presets": [[ "@babel/env", {"modules": false} ]], "plugins": [ "syntax-dynamic-import", "transform-async-to-generator" ] } Code: async function init() { const loaderData = await initLoader(); initCmp(loaderData) .then(initApi(loaderData.key)) .catch(); } init(); And Error: refactor.main.js:18 Uncaught ReferenceError:

问题 I have a webpack config that is based off https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js It uses vue-loader and babel-loader. The issue is I cannot get it to generate ES5 code so that it will work in the most broad range of clients. If I use the ES2015 preset, webpack.optimize.UglifyJsPlugin fails to minify the output because Uglify can only handle ES5 (not counting the harmony branch). The errors are similar to: Unexpected token: punc (() and occur

问题 The problem I have is when using the "react-app" Babel presets, Babel prevents me from using browser native ES6 features. How do I use the ES6 browser native features available in the latest Chrome http://kangax.github.io/compat-table/es6/ While also using the ES6 module system , which currently has no support https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import And additionally keep using the JSX syntax while writing React Components? 回答1: The solution I found was

问题 I am trying to render an array from firebase using React. I have a Container view which gets the data from firebase, and passes the data to the child component. Here is the code: Container.jsx import React from 'react' import Firebase from 'firebase' import loadsTable from './loadstable' class Container extends React.Component{ constructor(props){ super(props) this.loads = []; this.state = {loads:[]} } render(){ console.log("render" , this.state.loads) return( <div> <loadsTable loads={this

问题 Babel transpiled js works fine, but on IE11 the static inheritance seems not to work. Any idea? class SuperClass { constructor () {} static test () {} } class Sub extends SuperClass { constructor () { super(); } } Sub.test(); //Results in: "Object doesn't support property or method 'test' 回答1: It seems that Babel does not handle the case, in fact in the inherits helper, if the Object.setPrototypeOf method is undefined , Babel simply attaches the super class to the __proto__ key. I have