babel

This question already has an answer here: JavaScript: Loop through all the elements returned from getElementsByTagName 9 answers I'm building an app with Babel/ES6. I want to disable all form elements for a view-only version of it, so I did this: let form = document.getElementById('application-form') let elements = form.elements I expected to be able to do this, instead of using a regular old for loop (which did work): elements.forEach((el) => { el.disabled = true }) but I got TypeError: elements.forEach is not a function The strange thing is if I console.log(elements) in the Chrome dev

I'm launching a react app, and here's my Webpack configuration: 'use strict' const ExtractPlugin = require('extract-text-webpack-plugin') const HTMLPlugin = require('html-webpack-plugin') module.exports = { devtool: 'eval', entry: `${__dirname}/src/main.js`, output: { filename: 'bundle-[hash].js', path: `${__dirname}/build`, publicPath: '/', }, mode: 'development', performance: { hints: false }, plugins: [ new HTMLPlugin(), new ExtractPlugin('bundle-[hash].css'), ], module: { rules: [ { test: /\.js$/, exclude: /node_module/, loader: 'babel-loader', }, { test: /\.scss$/, loader: ExtractPlugin

webpack4.x webpack 模块打包工具，分析项目结构，找到js模块及一些浏览器不能运行的语言如ES6/sass等，并将其转换和打包为何时的格式供浏览器使用； 打包：将多个js文件打包成一个文件，减少服务器压力和下载带宽； 转换：把浏览器不能识别的语言转换为js，让浏览器能够正确识别 优化：优化项目，提高性能 安装 // 新建项目文件夹，并进入 mkdir webpack_demo cd webpack_demo //全局安装 npm install -g webpack // 全局安装后还需进行一个项目目录的安装，npm安装之前先进行初始化，目的-生成package.json文件（包括当前项目依赖模块，自定义脚本任务等） npm n init // 项目目录的安装 --save-dev保存到package.json中且在dev开发中使用，生产环境中不使用； npm install --save-dev webpack // 查看webpack版本 webpack -v // ps:查看webpack版本时会提示安装webpack-cli，因为此时安装的webpack版本是4.x；webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，还需要安装 webpack-cli npm install --save

I'm trying to setup babel-plugin-rewire so that in my Jest tests I can generate a small test snapshot for a wrapper component instead of having a huge one with all the child components in it. The settings seem all to be correct but I get the following error: ReferenceError: Wrapper is not defined at _get_original__ (app\components\Wrapper\tests\index.te st.js:22:2168) at _get__ (app\components\Wrapper\tests\index.test.js:22: 1912) at Suite.<anonymous> (app\components\Wrapper\tests\index. test.js:8:82) at Object.<anonymous> (app\components\Wrapper\tests\index .test.js:6:1) at process.

Hi please help me understand the differences between setting babel config inside .babelrc vs webpack loader options, vs inserting it in package.json. For example, Would it make any difference if I put the presets in the webpack babel-loader options vs package.json or a separate .babelrc config file? In webpack config: { test: /\.(js|jsx|mjs)$/, loader: require.resolve('babel-loader'), options: { "presets": [ "react-app" ] }, }, In package json: "babel": { "presets": [ "react-app" ] }, Webpack config : config the babel-loader completely in webpack.conf.js (no .babelrc). Webpack config +

I am using babel to transpile. I have class BaseComponent which is extended by class Logger . When I run new Logger() in the browser, I am getting this error Class constructor BaseComponent cannot be invoked without 'new' the code that throws this is: var Logger = function (_BaseComponent) { _inherits(Logger, _BaseComponent); function Logger() { _classCallCheck(this, Logger); return _possibleConstructorReturn(this, Object.getPrototypeOf(Logger).call(this, "n")); //throws here } Due to the way ES6 classes work, you cannot extend a native class with a transpiled class. If your platform supports

前言 最近做项目，发现有很多可抽离出来的组件，以前开发组件是用gulp和webpack搭建的脚手架，需要配置一堆 loader 之类的东西，配置完成后，编译出来的代码不仅可读性差，而且代码体积偏大。因此想找寻新的编译工具，最后发现 vue.js ， react.js 等流行库都用了 rollup.js 来编译代码，而且 rollup.js 可以编译输出各种模块规范的代码 AMD、Commonjs、UMD、IIFE 。所以也入门 rollup.js 。 rollup介绍 官方描述 Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。 rollupjs官网 1、配置文件 1、安装对应的包 // rollup编译的核心模块 npm install rollup -D // rollup的ES6编译插件 npm install rollup-plugin

What's the difference between .call() and super()? Is super() just an es2015 thing? Or does .call() have more functionality? super() calls the constructor of the class you extened class Foo extends Bar { constructor() { super(); // calls Bar's constructor } } call is a generic function you can use with any function function a() { console.log(this); }; function b() { console.log(this); }; function c() { console.log(this}; }; a.call("hello"); b.call(123); c.call({}); super knows which class you inherited from and automatically passes the correct this . class Foo extends Bar { constructor() {

When running webpack, and babel, the resulting bundle.js still contains arrow functions. This gives me a Syntax Error when running in Internet Explorer 10. I would like babel to replace the arrow functions with normal functions that IE can run. My package.json has the following devDependencies: "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-1": "^6.24.1", "css-loader": "^0.28.9", "imports-loader": "^0.7.1", "style-loader": "^0.19

转换前： const sum = (a,b)=>a+b 转化后： // "use strict"; // var fn = function fn(a, b) { // return a + b; // }; 实现： 从图片的对比我们可以看出最大的不同是在 init 时，函数的不同 init Es6 : ArrowFunctionExpression Es5: FunctionExpression 所以我们可以利用一个插件转化 let t = require('@babel/types'); 具体： const babel = require('@babel/core'); let code = `let fn = (a,b) => a + b`; let t = require('@babel/types'); //1.init // Es6 : ArrowFunctionExpression // Es5: FunctionExpression /// t.functionExpression(id, params, body, generator, async) // id: Identifier (default: null) // params: Array<LVal> (required) // body: BlockStatement (required) //