babel

const { src , dest , parallel , series , watch } = require( 'gulp' ) const del = require( 'del' ) const browserSync = require( 'browser-sync' ) // 搭服务的插件 const loadPlugins = require( 'gulp-load-plugins' ) // 将所有的 gulp 插件引入 const plugins = loadPlugins() const bs = browserSync. create () const data = { menus : [ { name : 'Home' , icon : 'aperture' , link : 'index.html' } , { name : 'Features' , link : 'features.html' } , { name : 'About' , link : 'about.html' } , { name : 'Contact' , link : '#' , children : [ { name : 'Twitter' , link : 'https://twitter.com/w_zce' } , { name : 'About' , link :

Vue.js+vue-element搭建属于自己的后台管理模板：创建一个项目（四） 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目，在学习Vue CLI之前我们需要先了解下webpack 代码编译工具，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。 webpack 官方中文文档地址： https://www.webpackjs.com/concepts/ Vue CLI 脚手架构建工具 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，搭建交互式的项目脚手架，Vue CLI版本3.x开始包名称由vue-cli 改成了 @vue/cli， 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载后再安装3.x版本，Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。 安装Vue CLI 在命令行输入： cnpm install -g @vue/cli （安装新包） 我们这里推荐用vue-cli 3.x构建项目，新版优化了编译速度，不过你也可以通过老版本创建项目，老版本安装命令：cnpm install --global vue-cli 备注： 安装后，检查是否安装成功 。vue

一 、vue项目打包上线前总会遇到一个问题就是开发过程中遗留的console代码，其实方法很简单： 下载依赖包 npm install babel-plugin-transform-remove-console --save-dev； 下载成功后在根目录的babel.config.js配置文件中，plugins数组中添加"transform-remove-console"即可。 不过这样设置会使得开发阶段也会屏蔽console，避免这种情况 这样改： 二、 配置babel.config.js 在babel.config.js文件中： // 所有生产环境 const prodPlugin = [] if (process.env.NODE_ENV === 'production') { // 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn prodPlugin.push([ 'transform-remove-console', { // 保留 console.error 与 console.warn exclude: ['error', 'warn'] } ]) } module.exports = { plugins: [ ...prodPlugin ] } 来源： oschina 链接： https://my.oschina.net/u/4461771

1.数组解构 var arr=[1,2,3] var [a,b,c]=arr 然后就可以给abc分别赋对应的值 应用场景: 1.1 var [x,y]=[y,x] 变量互换 1.2 字符串解构 var [a,b,c]='lha '1.3 复杂嵌套 var [a,,[b,c]]=[1,2,[3,4]] 像模块化import export都用到了解构 2.对象解构 var obj={ name:‘LIHANG’， age:18， son:{ name:'LILI'， age:15 } } es6 tips //当对象key value重名时可以简写 var {name:fatherName,son:{name,age}=obj 注意 嵌套有重复属性需要改名 也可以数组加对象嵌套解构 但是babel暂不支持 也可以使用循环解构数组多个对象 3.扩展运算符 var arr=[1,2,3] 将数组或者类数组对象(argments等)展开为一系列逗号隔开的值 ...arr=1,2,3 function(...arr){ }以前想给方法传数组只能用apply的形式 3.1特殊应用 3.1 数组的浅拷贝 3.2 字符串转数组...str 3.2 数组合并 [...arr,1，2，3]类似concat 展开运算符一般在等号右边 rest一般在等号左边 4.rest运算符 和展开相反

译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便！ 原文: Master Javascript’s New, Cutting-Edge Object Spread Operator 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。 在Node v8.0.0中引入了对象展开运算符(object spread operator)（注：需要配合harmony标签使用），在此我用一篇博客来深入介绍一下。前端使用该语法需要引入 babel 插件 。 展开运算符(Spread Operator) 展开运算符将所有可枚举的属性从一个对象展开到另一个对象去。我们来举一个例子： const obj1 = { c: 3, d: 4 }; const obj2 = { a: 1, b: 2, ...obj1 }; console.log(obj2); // -> { a: 1, b: 2, c: 3, d: 4 } obj1 的所有属性被展开到 obj2 中去。 一个很好的使用场景就是深度拷贝一个对象： const obj = { a: 123, b: 456 }; const objCopy = { ...obj }; console.log(objCopy); // -> { a: 123, b: 456 }

什么是React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 用来构建UI的 JavaScript库 React 不是一个 MVC 框架，仅仅是视图（V）层的库 特点 1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门 2 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新 3 HTML仅仅是个开始 为什么要用React 1 使用组件化开发方式，符合现代Web开发的趋势 2 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全） 3 由Facebook专门的团队维护，技术支持可靠 4 ReactNative - Learn once, write anywhere: Build mobile apps with React 5 使用方式简单，性能非常高，支持服务端渲染 6 React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目 React中的核心概念 1 虚拟DOM（Virtual DOM） 2 Diff算法（虚拟DOM的加速器，提升React性能的法宝） 虚拟DOM（Vitural DOM） React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异

像软件加密与解密一样，javascript的混淆与解混淆同属于同一个范畴。道高一尺，魔高一丈。没有永恒的黑，也没有永恒的白。一切都是资本市场驱动行为，现在都流行你能为人解决什么问题，这个概念。那么市场究竟能容纳多少个能解决这种问题的利益者。JS没有秘密。 其实本人不赞成javascript进行hash混淆处理，一拖慢运行时速度，二体积大。JS代码前端可获取，天生赋予“开源”属性，都可以在chrome devTools下查看。JS非压缩性混淆完全违法前端优化准则。 目前网络上可以搜索的JS混淆工具不外乎以下几种： eval混淆 ，也是最早JS出现的混淆加密，据说第一天就被破解，修改一下代码，alert一下就可以破解了。这种方法从出生的那天就失去了意义。其实JS加密（混淆）是相对于可读性而言的，其实真正有意义的就是压缩型混淆uglify这一类，即可减少体重，也可减少可读性。 但是，也不能排除部分商业源代码使用hash类型混淆源代码，比如 miniui 使用的 JSA加密 , fundebug使用的 javascript-obfuscator 。 下面通过代码来说明 JSA加密 和 javascript-obfuscator 的区别： 要混淆的代码： function logG(message) { console.log('\x1b[32m%s\x1b[0m', message); }

作者：沉末_ 原文：https://juejin.im/post/5d25b39bf265da1bb67a4176 前言 有时候使用 npm 上的包，发现有 bug ，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改 node_modules 里面的文件是不太行的，重新安装依赖就没有了。一般常用办法有两个： 下载别人代码到本地，放在 src 目录，修改后手动引入。 fork 别人的代码到自己仓库，修改后，从自己仓库安装这个插件。 这两个办法的缺陷就是：更新麻烦，我们每次都需要手动去更新代码，无法与插件同步更新。如果我们要修改的代码仅仅是别人的一个小模块，其他大部分代码都不动，这时候有一个很投机的操作：利用 webpack alias 来覆盖别人代码。 webpack alias 的作用 webpack alias 一般用来配置路径别名，使我们可以少写路径代码： chainWebpack: config => { config.resolve.alias .set( '@' , resolve( 'src' )) .set( '#' , resolve( 'src/views/page1' )) .set( '&' , resolve( 'src/views/page2

　　webpack是一个现代JavaScript应用程序的静态模块打包器，借用官网的一张图，它能够将一些预处理语言，js的最新语法转换成浏览器识别的内容。现在一般的前端框架都有比较成熟的脚手架，大多数对webpack都有个较好的集成，我们只需要敲一些简单的命令就能生成一个通用的项目模板，比较便捷，但是要知其然知其所以然，所以今天就尝试着从零开始搭建一个前端开发环境。 　　项目源码： 　　　　 https://github.com/gerryli0214/webpack-demo 　　webpack的四个核心概念： 　　　　1、入口（entry） 　　　　2、输出（output） 　　　　3、loader 　　　　4、插件（plugins） 　　首先，我们执行下npm init;初始化一个node工程，填写项目的信息，整个项目的目录结构如下： 　　 　　全部安装webpack-cli： npm install webpack-cli -g 　　安装项目webpack依赖： npm install webpack webpack-cli -D 　　新建一个 webpack.config.js, 这个是webpack默认配置文件，在里面我们可以配置打包信息，初始化文件为： const config = {}; module.exports = config; 　　 入口（entry）：

一.前言 webpack配置较为繁杂，大部分教程开篇就从基本术语开始讲起，容易让人望而生畏。so，我已实用为目的写了这篇文章。 项目地址 github 码云 二.目标 <input type="checkbox" checked disabled>支持热替换 <input type="checkbox" checked disabled>支持scss，自动添加前缀 <input type="checkbox" checked disabled>支持eslint <input type="checkbox" checked disabled>支持babel <input type="checkbox" checked disabled>支持图片压缩 <input type="checkbox" checked disabled>支持多js入口，多html模板 三.搭建环境 创建 package.json 文件 npm init -y 首先，安装 webpack，webpack-cli 和 cross-env npm install --save-dev webpack webpack-cli cross-env 其中 cross-env 主要是用于比较方便的跨平台设置 process.env.NODE_ENV ,用于区分开发环境和生产环境。 新建目录src，目录下创建index