扩展的方法：es6 安装模块builder模块化打包工具：webpack

https://github.com/es-shims/es5-shim/

Image.png

检测浏览器可支持es5，不支持就扩展，做兼容； 扩展的方法：

Image.png

取所有对象的键值； object类型的长度： 循环一遍，用

Image.png

做表单，不小心空格，去空格的作用？

对原型链的理解：和document冒泡是一样的；数组中找不到，就冒泡到原型上，在没有，就是没有， 作用玉 一直往上查找

Image.png

Image.png

首先：事件行为由Windows触发的 ie9以下捕获不支持； 先记录两个 匹配的话，事件就是他触发的 true是捕获，flase:是冒泡

==

Image.png

如果版本低于9；就把js引进来； 能把优化做到最高

怎么把es6代码编译成es5:

Image.png

http://babeljs.io/ sass用来编译什么文件 babel用来编译js文件： 把 语法直接编译成js

Image.png

把6的类模拟成5的方法： http://www.jscss.cc/2016/10/26/babel.html

安装babel的环境： 安装 Babel

babel-cli

在项目内运行 Babel CLI

babel-register
babel-node
babel-core

配置 Babel

.babelrc
babel-preset-es2015
babel-preset-react
babel-preset-stage-x

执行 Babel 生成的代码

babel-polyfill
babel-runtime

配置 Babel（进阶） 手动指定插件 插件选项 基于环境自定义 Babel 制作你自己的预设（preset） Babel 和其他工具

静态分析工具 语法检查（Linting） 代码风格

Image.png

2.查看版本

Image.png

3.开始写helloword.js

Image.png

Image.png

怎么配置输出es5的语法：

Image.png

指定将日志输出到哪个文件：

把6转为5需要安装模块

Image.png

出现babel

Image.png

http://www.jscss.cc/2016/10/27/react-build.html

Image.png

Image.png

Image.png

Image.png

错误的安装例子

Image.png

复制进去，直接npm install

Image.png

Image.png

es6在浏览器里运行不了；！！！为什么

Image.png

模块化打包工具：webpack

html:就是jsx

Image.png

编译以后的

Image.png

好处：拼接字符串的时候：没有引号 http://slides.fe.ioteams.com/slide/show?id=20#/

Image.png

忘了全局的环境

Image.png

{
                    presets: [
                        "es2015",
                        "react",
                        "stage-2"
                    ],
                    plugins: [
                        'transform-runtime',
                        'transform-es2015-classes'
                    ]
                }
            }

Image.png

vim只能编辑文件 查看区域

Image.png

输入a:右键paste 退出：esc wq:

Image.png

查看文件：

Image.png

Image.png

在编辑之前按a;把文本拿过来，即修改 退出编辑esc 退出文件：shift + ： 又修改又保存并退出：wq：小写

如果有冲突，把文件删除掉（命令是什么？），在建一个 进行修改： 回车删除掉 多余的花括号

Image.png

如果存在，会修改，不存在，会创建

Image.png

声明的关系没有了

Image.png

把src的文件夹编译到build的文件夹底下去

Image.png

核心代码，虚拟技术：reactdom

Image.png

写完过后进行编译：在build里面查看：

Image.png

当做模块返回过去

Image.png

Image.png

移动过来再编译一下：

Image.png

返回一个包含arr对象的

Image.png

Image.png

处理后的，一个新的语法接收的

Image.png

虚拟的dom转换为字符串，呈现的在body里面： 1.创建文件，根据文件做项目打包：

Image.png

fis： bat：百度，阿里，腾讯 对所有模块打包：http://webpack.github.io/ AMD和cmd是什么？ http://webpack.github.io/docs/tutorials/getting-started/

http://webpack.github.io/docs/configuration.html

入口文件去关联其他的文件

Image.png

重新写一个正常正式的js的文件来进行配置

Image.png

Image.png

Image.png

page1是我们定义输出的文件？

Image.png

最后一行是我们的

Image.png

在main.js中：第一个参数是函数的名字，怕在一个js里写很多模块

Image.png

自动压缩时文件名作为模块名，把 文件路径名当成了模块名

弹性的打包机制：支持三种命名规范

五分钟上手：http://seajs.org/docs/

Image.png

继续编译

Image.png

看代码

Image.png

自动创建？

Image.png

Image.png

对象里面是逗号，最后没有

Image.png

http://webpack.github.io/docs/using-loaders.html

Image.png

处理什么文件就引入

Image.png

模块处理gulp和pipe一样：管道的意思

Image.png

query: {
                    presets: [
                        "es2015",
                        "react",
                            "stage-2"
                       ],
                       plugins: [
                            "transform-runtime",
                            "transform-es2015-classes"
                       ]
              }

代码有变更就会自动编译： webpack -w -d:监听文件变化后自动编译

Image.png

直接压缩：webpack -p，编译时自动压缩

Image.png

Image.png