babel

目录 一、 安装依赖 二、 常用属性、事件 三、 demo应用 　　 html代码 属性用法 3.2.1 :default-expanded-keys(默认展开项) 3.2.2 :props= "defaultProps" 用法 3.2.3 通过render-content方法定义树节点内容(js代码) 3.2.4 :load="loadChildData" （load 加载子树数据的方法，仅仅当lazy属性为true时生效） (js代码) 3.2.5 @node-click="handleNodeClick" 3.2.6 更新二级数据 3.2.7 接口情况 3.2.8 页面效果图： 一 、安装依赖 本例中，使用render-content进行树节点内容的自定义，因此需要支持JSX语法。(见参考资料第3个) 在Git bash中运行一下指令 cnpm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev 二、常用属性、事件 常用属性 Attributes(属性名) 描述 type(类型) default(默认值) node-key 每个树节点用来作为唯一标识的属性，

webpack插件用于执行更广泛的任务，例如包优化，资产管理和环境变量注入。 webpack本身建立在与webpack配置相同的插件系统上。根据你使用Webpack的方式，有多种使用插件的方法。 事不宜迟，这里有六个很棒的webpack插件。 Webpack Bundle Analyzer 通过交互式的、可缩放的树状图来可视化webpack输出文件的大小。 该插件将帮助你您执行以下操作： 了解你的包里真正有什么 找出哪些模块构成了捆绑软件的最大组成部分 查找错误到达的模块 优化你的Webpack捆绑包 安装 # NPM npm install --save-dev webpack-bundle-analyzer # Yarn yarn add -D webpack-bundle-analyzer 复制代码 使用 const BundleAnalyzerPlugin = require ( 'webpack-bundle analyzer' ); module .exports = { plugins : [ new BundleAnalyzerPlugin() ] } 复制代码 offline-plugin offline-plugin 旨在为webpack项目提供离线体验。 该插件使用 ServiceWorker 和 AppCache 作为后台引擎。只需将这个插件包含在

10月16日，官方发布消息称Vue-cli 4.0正式版发布,并且强烈建议升级;小编也是刚刚安装了最新版本的脚手架看看更新了什么 安装和vue-cli3.0的是一模一样的，对比了一下3.0的脚手架，除了目录发生变化一些，其他的都一样 安装步骤和vue-cli3.0的一模一样 1.创建项目 vue create project-name default 是 使用默认配置 Manually select features 是 自定义配置 2.选择配置（自定义配置） 3.选择css预编译，这里我选择SCSS 4. 语法检测工具，这里我选择ESLint + Prettier 5.选择语法检查方式，这里我选择保存就检测 6.接下来会问你把babel,postcss,eslint这些配置文件放哪，这里随便选， 7.键入N不记录，如果键入Y需要输入保存名字 8.项目创建好后 cd project-name // 进入项目根目录 npm run serve // 运行项目 9.然后在浏览器输入http://localhost:8080,就可以看到运行的界面了 来源： oschina 链接： https://my.oschina.net/u/4355290/blog/3291956

本文基于node.js开发环境，安装完node之后新建项目，通过webpack配置，实现vue-cli脚手架功能 对于刚刚接触编程的人来说，最难的可能并不是学习一种新语法或者框架，而是编程思维，这种思维在调试的时候显得尤为重要，拥有良好的编程习惯和思维能力可以大幅度提高调试效率。而编程思维的培养往往需要经验的积累，只有把底层原理一遍遍地思考之后，才会有更深入的理解，这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一。 所以今天特意一步步通过webpack配置，实现与vue-cli相同的效果，希望大家能有所收获。 1. 创建一个vue项目 使用命令行mkdir vuedeom 或者直接新建一个vuedemo空文件夹，然后命令行cd vuedemo，使用npm init -y初始化，此时你会看到文件夹多了一个package.json的文件，内容大致如下： { "name": "vuedemo" , "version": "1.0.0" , "description": "" , "main": "index.js" , "scripts" : { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords" : [], "author": "" , "license": "ISC" } 2.

webpack5都出了，webpack4的的基本配置，解析ES6，引入CSS，编译Less，设置image等等，你都会了么？ ​解析ES6 了解Babel Babel是一个JavaScript编译器，可以实现将ES6+转换成浏览器能够 识别的代码。 Babel在执行编译时，可以依赖.babelrc文件，当设置依赖文件时， 会从项目的根目录下读取 .babelrc 的配置项，.babelrc配置文件 主要是对 预设(presets) 和 插件(plugins) 进行配置。 其中，presets可以标识需要转换的源码使用了哪些新特性， 可以理解为一系列plugins的集合，例如babel-preset-es2015，可以 将es6转换为es5；而plugins则指示babel如何对代码进行转换， 例如plugin-transform-arrow-functions可将ES6语法转换为 ES5。 解析ES6 1、安装依赖 npm i @babel/core @babel/preset-env babel-loader -D 2、配置webpack.config.js设置loader module: { rules: [ { test: /.js$/ , use: 'babel-loader' } ] } 3、根目录创建.babelrc，并配置preset-env对ES6+语法特性进行转换

前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零配置启动一个项目成为一种标配。正因为零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化，所以实际应用中，我们可以把精力更多专注在业务层面上，而无需分心于项目构建上的优化。然而从学习者的角度，我们需要了解webpack在项目的构建和打包压缩过程中做了哪些的优化，以及在原有默认配置上，还可以做哪些性能方面上的改进。 最近在完成vue的单页面应用后萌生了一个想法，抛弃掉vue-cli的构建配置，从零开始进行webpack优化，并将过程中的思路和体会分享在这篇文章中。webpack的初始配置在我之前写的另一篇 手把手教你从零认识webpack4.0 文章中，以下内容也不对基本的webpack配置做过多阐述。 一，优化的方向 1.1 项目开发 对开发者而言，我们希望webpack这个工具可以给我们带来流畅的开发体验。比如，当不断修改代码时，我们希望代码的变更能及时的通知浏览器刷新页面，而不是手动去刷新页面。更进一步的我们希望，代码的修改只会局部更换某个模块，而不是整个页面的刷新。这样可以使我们不需要在等待刷新中浪费很多时间，大大提高了页面的开发效率。 1.2 项目部署 项目部署上线时，性能优化是我们考虑的重点，有两个方向可以作为核心考虑的点

https://segmentfault.com/a/1190000018358854 来源： oschina 链接： https://my.oschina.net/u/4312837/blog/4264275

参考文章： 阮一峰 Class 的基本语法 类的由来 JavaScript语言的传统方法是通过构造函数定义并生成新对象，这种写法和传统的面向对象语言差异较大。所以，ES6引入了Class这个概念作为对象的模板。 class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到。 // es5 中的构造函数 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.toString = function () { return '(' + this.name + ',' + this.age + ')'; } var p = new Person('xiaoMing', 18); // es6 通过class实现 class Person { constructor(name, age) { this.name = name; this.age = age; } toString() { return '(' + this.name + ',' + this.age + ')'; } } var p = new Person('xiaoMing', 18); 上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法

学习ES6的前置知识： 1、熟练掌握ES5的知识：因为ES6只是ES5的升级，所以你必须对ES5的基本语法达到熟练的程度，如果你还不了解ES5的基本语法，还是脚踏实地地从头开始 2、了解ES6：听说并在工作学习中见过ES6，并了解ES6的用途 为什么要搭建ES6开发环境？ 为什么不像ES5那样直接写完就完事了，因为许多低版本浏览器并不支持ES6语法，大部分还是支持ES5语法，所以要搭建ES6开发环境，然后放在生产环境中，就是已经做好了上线。 1、首先创建项目工程目录 2、然后新建2个文件夹，一个是src文件夹 ，一个是dist文件夹 src:书写ES6的文件夹 dist:利用babel编译成的ES5代码的文件夹 3、新建一个index.html文件，需要在页面引入dist下的index.js文件 4、输入npm init -y,生成一个package.json文件 5、输入npm install -g babel-cli，全局安装babel-cli命令行，出现下图提示，安装成功 6、然后安装ES5打包工具，输入npm install --save-dev babel-preset-es2015 babel-cli命令，然后重新打开package.json文件，出现如下两行说明安装成功。 7、在根目录下创建.babelrc文件，输入json格式的对象 8、输入babel src

原文地址： JSON Parser with JavaScript 原文作者： Tan Li Hau 译文出自： 掘金翻译计划 本文永久链接： github.com/xitu/gold-m… 译者： Gavin-Gong 校对者： vitoxli ， Chorer 这周的 Cassidoo 的每周简讯有这么一个面试题： 写一个函数，这个函数接收一个正确的 JSON 字符串并将其转化为一个对象（或字典，映射等，这取决于你选择的语言）。示例输入： fakeParseJSON('{ "data": { "fish": "cake", "array": [1,2,3], "children": [ { "something": "else" }, { "candy": "cane" }, { "sponge": "bob" } ] } } ') 复制代码 一度我忍不住想这样写： const fakeParseJSON = JSON .parse; 复制代码 但是，我记起我写过一些关于 AST 的文章： 使用 Babel 创建自定义 JavaScript 语法 一步一步教你写一个自定义 babel 转化器 使用 JavaScript 操作 AST 其中包括编译器管道的概述，以及如何操作 AST，但是我还没有详细介绍如何实现解析器。 这是因为在一篇文章中实现 JavaScript