扩展的方法：es6 安装模块builder模块化打包工具：webpack
扩展的方法：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