babel | 易学教程

gulp处理文件

阅读更多关于 gulp处理文件

通常，我们使用gulp提供的src()和dest()方法处理文件如： const { src, dest } = require('gulp'); exports.default = function() { return src('src/*.js') .pipe(dest('output/')); } 在项目中，我们经常使用babel格式化下我们的代码，在写入输出的相关目录。 const { src, dest } = require('gulp'); const babel = require('gulp-babel'); exports.default = function() { return src('src/*.js') .pipe(babel()) .pipe(dest('output/')); } 如执行前gulpfile.js文件内容如下： const { src, dest } = require('gulp'); const babel = require('gulp-babel'); function test(){console.log("hello world")} var name = "huangbaokang"; var age=30; obj ={"author":"huangbaokang",age:30} exports.default

Babel6.x 转换ES6

阅读更多关于 Babel6.x 转换ES6

本文介绍Babel6.x的安装过程~ 首先呢，可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题：安装Babel（命令行环境，针对Babel6.x版本） 1、首先安装babel-cli（用于在终端使用babel）　　npm install -g babel-cli 2、然后安装babel-preset-es2015插件　　npm install --save babel-preset-es2015 　　注：Babel5版本默认包含各种转换插件，然而Babel6.x相关转换插件需要自己下载，如transform-es2015-arrow-functions、transform-es2015-classes等，而ES2015 preset包含了所有插件。如果不安装任何插件，那么在命令行进行转换是没有任何效果的！　　其中--save参数自动更新package.json文件，写进依赖项 3、在命令行输入：　　babel es6.js --presets es2015 输出：　　"use strict"; 　　[1, 2, 3].map(function (x) { 　　 return x * x; 　　}); 　　注：后面的参数--presets es2015表示使用该插件进行编译，如果不写上转换是没有效果的。　 4、插件配置　

五分钟学习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> 这种方法构建的前端项目，显而易见很迅速，可以简单、直接的完成前端想要的各种逻辑。比如

了解gulp

阅读更多关于了解gulp

简单了解gulp 在日常开发中，我们往往会用到很多前端的构造工具，我们常见的有Node,NPM,Grunt,Gulp…，很多很多，上一篇博客中已经简单的介绍了npm，这里再简单讲解一下gulp。什么是gulp gulp是一个前端自动化打包构建工具，主要用来帮我们把代码进行压缩、转码，gulp运行必须依赖 node 环境。 gulp 安装因为gulp是一个全局工具，所以直接使用npm安装gulp工具就ok了。当然也可以安装项目里的gulp，看个人需求。全局安装gulp： npm i -g gulp 项目安装gulp ： npm i gulp gulp 检测检测gulp： gulp --version 或者 gulp -v ，版本号为CLI version: 2.2.0就是对的。 gulp 卸载输入指令 npm uninstall --global gulp 或 npm un -g gulp 即可完成卸载 gulp 的方法 1. src ( ) => 用来找到你要打包的文件的 => src ( '你要打包的文件的地址' ) => 返回值就是一个二进制流 , 就可以继续去调用别的方法 2. pipe ( ) => 用来帮你做事情的 => pipe ( 你要做的事情 ) => 返回值 : 又是一个二进制流 , 可以继续使用方法 3. dest ( ) => 用来写入文件的 =>

关于react在ie中的兼容

阅读更多关于关于react在ie中的兼容

参考： https://babeljs.io/docs/en/babel-polyfill 1、安装 npm i @babel/polyfill -S yarn add @babel/polyfill 2、导入在入口文件 src\index.js 中最顶部导入： import '@babel/polyfill' 来源： oschina 链接： https://my.oschina.net/u/2436852/blog/3176306

ECMAScript 6简介

阅读更多关于 ECMAScript 6简介

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015，下一年应该会发布小幅修订的ES2016。 ECMAScript和JavaScript的关系一个常见的问题是，ECMAScript和JavaScript到底是什么关系？要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标

轻松学 Webpack 4 视频教程（36 个视频）

阅读更多关于轻松学 Webpack 4 视频教程（36 个视频）

轻松学 Webpack 4 视频教程（36 个视频）轻松学 Webpack 4 视频教程 #1 课程介绍「03:20」轻松学 Webpack 4 视频教程 #2 安装「05:04」轻松学 Webpack 4 视频教程 #3 zero config 「05:48」轻松学 Webpack 4 视频教程 #4 Mode 「Pro」「06:46」轻松学 Webpack 4 视频教程 #5 搭建项目「Pro」「05:12」轻松学 Webpack 4 视频教程 #6 用 npx 来解决全局安装的问题「Pro」「05:04」轻松学 Webpack 4 视频教程 #7 配置文件 webpack.config.js 「Pro」「04:38」轻松学 Webpack 4 视频教程 #8 配置多入口文件 Entry Points 「Pro」「04:41」轻松学 Webpack 4 视频教程 #9 什么是 Babel 「Pro」「04:32」轻松学 Webpack 4 视频教程 #10 babel-loader 的介绍与安装「Pro」「05:09」轻松学 Webpack 4 视频教程 #11 Babel Plugins - plugin-transform-arrow-functions 「Pro」「05:29」轻松学 Webpack 4 视频教程 #12 Babel

webstorm相关安装学习

阅读更多关于 webstorm相关安装学习

webstorm相关的安装（尤其是安装webpack，很崩溃）： node.js安装以及配置链接： https://www.cnblogs.com/zhouyu2017/p/6485265.html 解决”cnpm不是内部命令“问题： https://blog.csdn.net/qq_38292703/article/details/82669874 注：由于cnpm的安装路径不在环境配置中 webstorm+webpack的安装与配置： https://blog.csdn.net/mafan121/article/details/71211922 错误：webpack报错Insufficient number of arguments or no entry found 解决：首先查看webpack版本：webpack -v webpack4 正确的配置方式： https://www.codercto.com/a/35519.html 错误：在控制台中运行命令“webpack”，出现错误：ERROR in Entry module not found: Error: Can 't resolve ' babel-loader ' in ' D:\Ilkwork' 解决：在控制台输入命令“npm install babel-loader --save" 错误：输入命令npm

webpack--babel之配置文件.babelrc

阅读更多关于 webpack--babel之配置文件.babelrc

一：理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的？ ES6是2015年发布的下一代javascript语言标准，它引入了新的语法和API，使我们编写js代码更加得心应手，比如class，let,for...of promise等等这样的，但是可惜的是这些js新特性只被最新版本的浏览器支持，但是低版本浏览器并不支持，那么低版本浏览器下就需要一个转换工具，把es6代码转换成浏览器能识别的代码，babel就是这样的一个工具。可以理解为 babel是javascript语法的编译器。 2. Babel编译器在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。在.babelrc配置文件中，主要是对预设(presets) 和插件(plugins) 进行配置。.babelrc配置文件一般为如下： { "plugins": [ [ "transform-runtime", { "polyfill": false } ] ], "presets": [ [ "env", { "modules": false } ], "stage-2", "react" ] } 2.1 plugins 该属性是告诉babel要使用那些插件，这些插件可以控制如何转换代码。 1. 理解

前端模块化工具-webpack

阅读更多关于前端模块化工具-webpack

webpack是一个模块管理工具，它跟grunt,gulp,fis等诸多前端工具一样，为了使日渐增多的js代码变得合理有序，应运而生的模块化工具 1 - 它同时支持commonjs和AMD规范（甚至混合的形式）； 2 - 它可以打成一个完整的包，也可以分成多个部分，在运行时异步加载（可以减少第一次加载的时间）； 3 - 依赖在编译时即处理完毕，可以减少运行时包的大小； 4 - Loaders可以使文件在编译时得到预处理，这可以帮我们做很多事情，比如说模板的预编译，图片的base64处理； 5 - 丰富的和可扩展的插件可以适应多变的需求。下面是我的webpack的配置： var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { //插件项 plugins: [commonsPlugin], //页面入口文件配置 entry: { index : './app/js/index.js' }, //入口文件输出配置 output: { path: 'dist/js', filename: '[name].js' }, module: { //加载器配置 loaders: [ { test: /

订阅 babel