babel

Is Babel a compiler or transpiler?

阅读更多关于 Is Babel a compiler or transpiler?

I've been using Babel for a while now, and I've always been under the impression that Babel was a transpiler for converting my ES6 and ES7 JavaScript into ES5 JavaScript, as I was under the assumption that you could technically treat ES5 and ES6 as two different language. However, I couldn't help but notice that Babel's website title describes it as a compiler , which I believe is something very different from a transpiler . Is Babel a transpiler or a compiler , or perhaps offers both options? Or is the website's title simply incorrect? Disclosure: I know this sounds like a very pedantic

webpack学习笔记

阅读更多关于 webpack学习笔记

安装全局不推荐 npm install webpack webpack-cli -g//webpack-cli 可以帮助我们在命令行⾥使⽤npx ,webpack等相关指令 webpack -v 局部安装项⽬内安装 npm install webpack webpack-cli --save-dev //-D webpack -v //command not found 默认在全局环境中查找 npx webpack -v// npx帮助我们在项⽬目中的node_modules⾥查找webpack 安装指定版本 npm info webpack//查看webpack的历史发布信息 npm install webpack@x.xx webpack-cli -D webpack 配置文件 webpack有默认的配置文件，叫webpack.config.js，我们可以对这个文件进行修改，进行个性化配置，也可以不使用默认的配置文件。默认的配置文件:webpack.config.js npx webpack //执行命令后，webpack会找到默认的配置文件，并使用执行不使用默认的配置文件: webpackconfig.js npx webpack --config webpackconfig.js //指定webpack使用webpackconfig.js文件来作为配置文件并执行

error: bundling failed: TypeError: Cannot read property 'bindings' of null

阅读更多关于 error: bundling failed: TypeError: Cannot read property 'bindings' of null

问题 I am also facing a same issue while running the react-native app. The version i am using is as follows: React-Native:0.57.1 react-native-cli:2.0.1 node:v8.11.3 npm:5.6.0 Babel Version details: "devDependencies": { "@babel/runtime": "^7.0.0", "babel-jest": "20.0.3", "babel-preset-react-native": "^2.1.0", "jest": "20.0.4", "react-test-renderer": "16.0.0-alpha.12", "schedule": "^0.4.0" }, "jest": { "preset": "react-native" } } Error: error: bundling failed: TypeError: Cannot read property

Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty

阅读更多关于 Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty

问题 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:

jason数组实现页面

阅读更多关于 jason数组实现页面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #content{ width: 1000px; margin: 300px auto; border: 1px solid #000; overflow: hidden; } .box{ border: 1px solid #000; overflow: auto; width: 200px; box-sizing: border-box; float: left; } .box p{ line-height:15x; font-size: 14px; width: 100%; } .box span{ font-size: 16px; color: red; } </style> </head> <body> <div id="content"> <p>暂时没有货</p>  <!--<p>苏泊尔（SUPOR)电磁炉整板触控

Support for the experimental syntax 'classProperties' isn't currently enabled

阅读更多关于 Support for the experimental syntax 'classProperties' isn't currently enabled

While I was setting up React within Django project I came across this error ModuleBuildError in Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\1Sun\Cebula3\cebula_react\assets\js\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:9): 15 | 16 | class BodyPartWrapper extends Component { > 17 | state = { | ^ 18 | 19 | } 20 | Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation. So, I installed @babel/plugin-proposal-class

ES6

阅读更多关于 ES6

ECMAScript 6 目标：学习完 ES6 可以掌握方便后续的开发，未来工作中大量使用 ES6 开发学习网站：http://es6.ruanyifeng.com ECMAScript 6 介绍 ECMAScript 6 新增语法内置对象的扩展 ECMAScript 6 降级处理 ECMAScript 6 介绍 1.1 为什么要学习ES6 提供了更加方便的新语法弥补 JS 语言本身的缺陷，新增了便捷的语法给内置对象增加了更多的方法 ES6 让 JS 可以开发复杂的大型项目，成为企业级开发语言新的前端项目中大量使用 ES6 的新语法 1.2 ECMAScript 6 是什么 ECMAScript 6 又叫 ES2015，简称 ES6 ES6 是继 ES4、ES5 之后的 JS 语言规范 ES6 中增加了一些新的特性 ES6 的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言 2015年6月发布 1.3 小结 ES6 是新的 JS 的代码规范，提供了一些新特性，使我们可以开发大型应用 ES6 弥补了 JS 语言本身的缺陷，增加了新语法，扩展了内置对象 ECMAScript 6 新增语法 let 和 const 解构赋值函数字符串扩展数组扩展新的定义对象的方式 2.1 let 和 const let let 定义变量

babel 的简单使用

阅读更多关于 babel 的简单使用

之前在项目中使用.balelrc文件，但是一直不知道具体怎么使用，就知道可以将es6语法转码为es5语法。今天就简单的做个例子，也算是记录一下困扰了好久的问题。转码步骤：首先在项目的目录中安装Babel 创建配置文件 .balelrc ，存放在项目的根目录下利用Babel提供的命令行工具 @babel/cli ，用命令行进行转码 1.1 安装Babel，可以直接使用命令行安装。 npm install --save-dev @babel/core 1.2 配置文件 .babelrc 该文件用来设置转码规则和插件的，基本格式为： { "presets": [], "plugins": [] } presets 字段设定转码规则，官方提供一下的规则集，可以按需加载 # 最新转码规则 $ npm install --save-dev @babel/preset-env # react 转码规则 $ npm install --save-dev @babel/preset-react 然后将这些规则加入.babelrc文件 { "presets":[ "@babel/env", "@babel.preset-react" ], "plugins":[] } 1.3 命令行转码 Babel 提供命令行工具 @babel/cli ，用于命令行转码。 npm install --save

阅读更多关于 babel

Babel 转码器 1. .babelrc 存放在项目的根目录下基本格式 { "presets": [], "plugins": [] } presets字段设定转码规则 ```javascript # 最新转码规则 $ npm install --save-dev babel-preset-latest # react 转码规则 $ npm install --save-dev babel-preset-react # 不同阶段语法提案的转码规则（共有4个阶段），选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3 { "presets": [ "latest", "react", "stage-2" ], "plugins": [] } ``` 2. 转码命令行 ```javascript $ npm install --global babel-cli # 转码结果输出到标准输出 $ babel example.js # 转码结果写入一个文件 # -

What's the difference between babel-preset-stage-0, babel-preset-stage-1 etc?

阅读更多关于 What's the difference between babel-preset-stage-0, babel-preset-stage-1 etc?

My question is : What's the difference between babel-preset-stage-0 , babel-preset-stage-1 , babel-preset-stage-2 and babel-preset-stage-3 , and what's the best choice when we develop with ES6 ? Babel's stage presets equate to the TC39 Process and the different states of each proposal for a potential language change. They include implementations and polyfills for all of the proposed changes in that stage. Anything currently in Stage-0 is Strawman, not ES6. It is future Javascript and absolutely not certain that it will ever make it into any official ECMAScript specification. Please do not just

订阅 babel