babel | 易学教程

Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled

阅读更多关于 Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled

问题 I'm trying to build JS react project with decorators. My .babelrc looks like this: { "presets": [ "@babel/preset-env", "@babel/preset-react", ], "plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-transform-object-assign", [ "@babel/plugin-proposal-decorators", { "legacy": true } ], ["@babel/plugin-proposal-class-properties", { "loose": true }] ] } Adding @babel/plugin-proposal-decorators problems appears again. I am using babel 7, webpack 4 and react 16.5 webpack.config.js: const

Using Babel + grunt to work with ES6 - how to transform require statements?

阅读更多关于 Using Babel + grunt to work with ES6 - how to transform require statements?

问题 I want to start using ES6, and I want to use grunt to manage my files. This is my project structure so far: Gruntfile.js package.json dist/ src/ index.es6 And this is what index.es6 looks like: import MapGL from 'react-map-gl'; const data = []; const viewport = new Viewport(); These packages are all defined in package.json and installed. How do I turn this ES6 file into ES5 JavaScript? Right I'm able to turn it into JavaScript of a sort, but it's not transforming the require statements at all

前端随心记---------前端打包工具

阅读更多关于前端随心记---------前端打包工具

ES6模块化： export default{ } 引入import 文件名 from 文件地址， export function fn（） { } 引入 import { fn } from 地址；开发环境----babel （编译ES6语法）资料中文网： https://www.babeljs.cn/ 1.node环境，运行npm init ； 2.npm install --save -dev babel-core babel-preset -es2015 babel -preset -latest 3.创建 .babelrc 文件 4.npm install --global babel -cli (管理员模式开启命令行) 5.babel --version 开发环境--webpack 资料中文网： https://www.webpackjs.com/ 1.npm install webpack babel-loader --save -dev 2.配置 webpack.config.js 3.配置package.json 中的scripts 4.运行 npm start module.exports = { entry:'./src/index.js', //入口 output:{ //出口 path:__dirname, filename:'./build

babel填坑笔记

阅读更多关于 babel填坑笔记

cnpm install --save-dev @babel/core //安装//用npm安装一直报错，改用cnpm安装就可以了创建一个.babelre文件并配置 { "presets": [　　　　"@babel/env" 　　　　], "plugins": [] } cnpm install --save-dev @babel/preset-env //安装避免报错统一用cnpm//安装@babel/register 模块可以使用imort的方式导入模块cnpm install --save-dev @babel/register // main.js require('@babel/register'); require('./app.js'); 来源： https://www.cnblogs.com/flyerya/p/11429080.html

五分钟学习React(五)：React两种构建应用方式选择

阅读更多关于五分钟学习React(五)：React两种构建应用方式选择

本文转载于: 猿2048 网站五分钟学习React(五)：React两种构建应用方式选择经过这四期的讲解，我们从Hello World应用入手，解释了React最重要的概念JSX，以及两种不同模式的应用构建方法。这一讲我们着重对比传统模式和新模式下的React项目构建，从而为初学者提供学习方向。 1. 传统模式构建一般在传统模式下，我们构建前端项目很简单。就是下载各种js文件，如JQuery、Echart等，直接放置在html静态文件。这样在这个前端项目中，默认生成或者是定义全局变量，从而使用js各种开发包的特性。典型代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ... <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>> ... </head> <body> ... <script type="text/javascript"> $("div.test").onclick(function(){ // code goes ... }) </script> </body> </html> 这种方法构建的前端项目，显而易见很迅速，可以简单、直接的完成前端想要的各种逻辑。比如

React 学习记录(一)

阅读更多关于 React 学习记录(一)

入门 (环境配置，Hello World) 一、安装 nodeJS 　　下载目录： http://nodejs.cn/download/ 二、配置环境　　 1.新建项目目录：E:\study\React\demos\Hello 　　 2.CMD至项目目录，使用 npm init 命令生成package.json文件，生成的文件代码如下： { 　　 "_note": "名称中不能有大写字母，其余的可以自动生成", 　　 "name": "helloworld", 　　 "version": "1.0.0", 　　 "description": "a new demo", 　　 "main": "index.js", 　　 "private": true, 　　 "scripts": { 　　　　 "test": "echo \"Error: no test specified\" && exit 1" 　　 }, 　　 "keywords": [ 　　　　 "react" 　　 ], 　　 "author": "cheny", 　　 "license": "ISC" } 　　 3.安装开发过程中所需要的包　　　　 3.1安装react开发包 npm i react --save ，这里使用的是 --save 意思是安装的这个包在发布后也依然被依赖。　　　　 3

nodejs 8 import module - require or import? [duplicate]

阅读更多关于 nodejs 8 import module - require or import? [duplicate]

This question already has an answer here: NodeJS plans to support import/export es6 (es2015) modules 1 answer Just wonder how do we import a module in node.js 8 - are we still using require ? Or do we still need babel for using import ? I have been digging around but seems no answer. If we still have to use require, why can't node implement import yet? UPDATE-2018.11.15 ↓ Short answer We're still using require Long answer ESM loading has partially landed in node 8.5.0 which was released in September 2017. As such, it has beeen part of the specs as an experimental feature for a little while:

基于react开发package.json的配置

阅读更多关于基于react开发package.json的配置

项目依赖 react网页开发的3件套: react, react-dom, react-router-dom, redux, react-redux react的UI组件库: antd(pc端), antd-mobile(移动端) 类型检测: prop-types http库: axios 开发依赖打包工具: webpack 代码转换: @babel/core, @babel/preset-react, webpack loader babel-loader css-loader style-loader webpack plugin @babel/plugin-proposal-class-properties html-webpack-plugin babel-plugin-import 相关网站 http://www.axios-js.com/ https://webpack.docschina.org/ https://ant.design/index-cn https://mobile.ant.design/index-cn http://huziketang.mangojuice.top/books/react/ https://react-router.docschina.org/ 　来源： https://www.cnblogs.com/answercard/p

AST 抽象语法树

阅读更多关于 AST 抽象语法树

提起 AST 抽象语法树，大家可能并不感冒。但是提到它的使用场景，也许会让你大吃一惊。原来它一直在你左右与你相伴，而你却不知。一、什么是抽象语法树在计算机科学中，抽象语法树（ abstract syntax tree 或者缩写为 AST ），或者语法树（ syntax tree ），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。之所以说语法是「抽象」的，是因为这里的语法并不会表示出真实语法中出现的每个细节。二、使用场景 JS 反编译，语法解析 Babel 编译 ES6 语法代码高亮关键字匹配作用域判断代码压缩三、AST Explorer 我们来看一个 ES6 的解释器，声明如下的代码： 1 let tips = [ 2 "Jartto's AST Demo" 3 ]; 看看是如何解析的, JSON 格式如下： 1 { 2 "type": "Program", 3 "start": 0, 4 "end": 38, 5 "body": [ 6 { 7 "type": "VariableDeclaration", 8 "start": 0, 9 "end": 37, 10 "declarations": [ 11 { 12 "type": "VariableDeclarator", 13 "start": 4,

babel vs babel-core vs babel-loader vs babel-preset-2015 vs babel-preset-react vs babel-polyfill

阅读更多关于 babel vs babel-core vs babel-loader vs babel-preset-2015 vs babel-preset-react vs babel-polyfill

问题 I was setting up Webpack for my React project and got confused between babel , babel-core , babel-loader , babel-preset-2015 and babel-preset-react . I know that Babel is needed to transform ES7 or ES6 code to ES5 but in my package.json I have installed all these dependencies except Babel and they also as devDependencies . Can someone please explain what's the difference between all these and why all of them are needed for my project? Isn't there any single dependency to replace them all? And

订阅 babel