babel

简介： ---> 语法的转换 　　是js的编译器： Babel 是一个 工具链 ，主要用于将 ECMAScript 2015+ 版本的代码转换为 向后兼容 的JavaScript 语法 　　1. 语法转换 　　2. 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块) 　　3. 源码转换 支持转换哪些语法： 　　ECMAScript 2015+ 　　JSX 语法 　　类型注释（Flow 和 TypeScript） 可以删除类型注释，但不做类型检查 特点： 　　插件化： Babel构建在插件之上 ---> 一个插件就是一个函数 　　可调试： 支持 Source map 　　符合规范 编辑器： （VS Code） 　　语法高亮： VSCode sublime-babel-vscode 扩展 　　 来源： https://www.cnblogs.com/baota/p/12365674.html

第一章：Node.js模块化开发 1.1-JavaScript开发弊端 JavaScript在使用时存在两大问题 文件依赖 命名冲突。 1.2-模块化开发的好处 生活中的模块化 一台电脑由多个模块组成（显卡、内存、硬盘、cpu等）。 若其中某一个模块坏了（比如硬盘），只需要更换坏掉的模块即可，而不用更换整个电脑。 软件中的模块化开发 一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块不会影响其他功能的运行。 便于维护和管理 提高开发效率 1.3-Node.js中模块化开发规范 Node.js规定 一个JavaScript文件 就是一个模块，模块 内部定义的变量和函数 默认情况下在 外部无法得到 。 模块内部可以使用 exports 对象进行成员导出， 使用 require 方法导入其他模块。 1.4-模块内成员的导入和导出 语法： 导出：exports.key=value; 导入：const 变量名 = require("模块名称"); 代码： a文件模块，导出成员 const version = "1.0"; let name = "bruce"; let age = 10; let printInfo =(){ console.log(`姓名：${name}`); console.log(`年龄：${age}`); } // 【导出成员】 exports

今天介绍 webpack 怎么编译 ES6 的各种函数和语法。敲黑板： 这是 webpack4 版本哦, 有一些不同于 webpack3 的地方。 >>> 本节课源码 >>> 所有课程源码 1. 了解 babel 说起编译 es6 ，就必须提一下 babel 和相关的技术生态： babel-loader : 负责 es6 语法转化 babel-preset-env : 包含 es6、7 等版本的语法转化规则 babel-polyfill : es6 内置方法和函数转化垫片 babel-plugin-transform-runtime : 避免 polyfill 污染全局变量 需要注意的是, babel-loader 和 babel-polyfill 。前者负责语法转化，比如：箭头函数；后者负责内置方法和函数，比如： new Set() 。 2. 安装相关库 这次，我们的 package.json 文件配置如下： { "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "webpack": "^4.15.1" }, "dependencies":

如果有一个Javascript对象： var objects={...}; 假设它具有50多个属性，却不知道属性名称（即不知道“键”）如何在循环中获取每个属性值？ #1楼 这是一个可重用的函数，用于将值放入数组。 它也考虑了原型。 Object.values = function (obj) { var vals = []; for( var key in obj ) { if ( obj.hasOwnProperty(key) ) { vals.push(obj[key]); } } return vals; } #2楼 根据您必须支持的浏览器，可以通过多种方式完成此操作。 狂野的绝大多数浏览器都支持ECMAScript 5（ES5），但请注意，下面的许多示例都使用 Object.keys ，而在IE <9中不可用。请参阅 兼容性表 。 ECMAScript 3+ 如果必须支持IE的旧版本，则可以选择以下选项： for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var val = obj[key]; // use val } } 嵌套的 if 可以确保您不枚举对象原型链中的属性（这几乎是您肯定想要的行为）。 您必须使用 Object.prototype

目录结构（先创建好） 简单说明一下 下面有代码的直接粘贴复制 有些没有代码的 这里先解释一下 1.node_modules 这个文件夹没什么好说的 2.src 这个文件夹里面就是我们需要写的 （1）.src/component 这里一般都是方组件的 我没有写组件 所以这里空空如也 （2）.src/pages 这里放的就是打包的页面了 （3）.src/pages 里面pageinfo.json 这个文件是配置单独页面的一些seo之类的配置 不写的 生成模板是会有默认的 代码很简单 稍微看一下就明白 （4）.关于.scss文件 因为我现在就在用scss 所有这里就用scss 没有用 css上面的 有需要的可以自己配置下百度一下很简单 下面就是一些主要代码 希望能对在看此篇文章的你起到帮助作用 一、生成模板文件 //create-html.js const fs = require("fs"); const HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html文件 const getPath = require("./get-path"); let htmlArr = []; function createHtml(page_path) { getPath(page_path).map((item) => { let

来源：https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md Babel 的使用就是使用一些预设配置。预设就是一组插件，比如env, stage-3 flow react typescript预设。 Babel的核心就是插件，插件就是基于核心函数，对AST树的一些操作 Babel 核心的核心就是一组函数 【重要函数】 parser traverse generator core.parser core.transorm 【辅助函数】 code-frame helpers template types Babel 插件手册是官网编写的插件指南！涉及基本概念，API，转换操作，构建节点，最佳实践等部分 一、基本概念 AST抽象语法树 所有类型节点都有 Node 接口以及其它参数，比如代码的起始位置，参数，左右节点等等： interface Node { type : string ; } Babel处理步骤 Babel 的三个主要处理步骤分别是： 解析（parse） ， 转换（transform） ， 生成（generate） 。. 遍历AST之访问者模式： 通过访问者模式，访问每一个节点！ 深度递归遍历整个树。 1、访问者名字 ：

一、在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6，文件夹里新建一个文件es6.js。 打开命令行窗口 1、先全局安装babel-cli,输入命令 npm install babel-cli -g 2、输入 cd d:\es6 ; ---进入文件夹路径 3、输入 npm init ； 一路回车键 ---（引导你创建一个package.json文件，包括名称、版本、作者这些信息等） 4、输入 npm install --save-dev babel-cli ； ---（安装命令行转码babel-cli工具） 5、es6文件里新建配置文件.babelrc 复制代码 { "presets": [], "plugins": [] } 粘贴到.babelrc 里 6、命令行窗口输入 npm install --save-dev babel-preset-es2015 ；---（安装es2015依赖项） 将"es2015"加入.babelrc { "presets": [ "es2015" ], "plugins": [] } 7、输入 babel -h 检测是否安装成功 8、将es6编译成es5 例如： babel es6.js -o es5.js 二、WebStorm中es6到es5的自动转换设置 babel及es2015安装同上，即按照上面1-7的步骤执行即可

和之前一样的小工具 相比parcel需要进行很多配置, parcel可以直接使用es7,8的语法, webpack需要自己配babel和各种loader 打包大小, 这个小工具体现不了太多, 两个都是32k左右 同样的只能对export进行tree shaking, 导入path, 即使没有使用, 代码中还是会有require, 可能是需要设置一下......懒得折腾了 根据配置文件中的url下载网页并保存 webpack 配置文件 需要用插件将config拷贝出去 设置类型为node 配置中的node字段含义 参考 https://webpack.js.org/configuration/node/ const path = require('path'); const copyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'index.bundle.js', path: path.resolve(__dirname, 'dist') }, target: 'node', plugins: [ new copyWebpackPlugin([{ from: __dirname + '/src/config'

前言 　 　　下面是我们使用到技术栈: 　　　　webpack + react + redux + react-router + react-thunk + ES6 + .... 　　注意事项： 　　　　建议使用npm5.X 或者 yarn 包管理工具(最好不要使用cnpm,虽然安装包速度上很快,但是在文件关联上会有坑,之前用的时候被坑过) 一、新建项目目录 config : webpack 配置文件 dist： 打包后代码 src： 源码目录 二、基础配置 安装基础的包 // 生成默认package.josn 文件 npm init // 安装 webpack 和 webpack-dev-server npm install webpack webpack-dev-server --save-dev // 安装 react react-dom npm install react react-dom --save // 安装 babel-core 、babel-loader、babel-preset-env、babel-preset-react npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev // html-webpack-plugin 生成html文件 npm

react全家桶从0到1(最新) 本文从零开始，逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解，通过这个项目，可以系统的了解react技术栈的主要知识，避免搭建一次后面就忘记的情况。 从webpack开始 思考一下webpack到底做了什么事情？其实简单来说，就是从入口文件开始，不断寻找依赖，同时为了解析各种不同的文件加载相应的loader，最后生成我们希望的类型的目标文件。 这个过程就像是在一个迷宫里寻宝，我们从入口进入，同时我们也会不断的接收到下一处宝藏的提示信息，我们对信息进行解码，而解码的时候可能需要一些工具，比如说钥匙，而loader就像是这样的钥匙，然后得到我们可以识别的内容。 回到我们的项目，首先进行项目的初始化，分别执行如下命令 mkdir react-demo // 新建项目文件夹 cd react-demo // cd到项目目录下 npm init // npm初始化 引入webpack npm i webpack --save touch webpack.config.js 对webpack进行简单配置，更新webpack.config.js const path = require('path'); module