https://github.com/es-shims/es5-shim/
![5640239-68509477fd7ade74.png](https://upload-images.jianshu.io/upload_images/5640239-68509477fd7ade74.png)
检测浏览器可支持es5,不支持就扩展,做兼容;
扩展的方法:
![5640239-c5d4f55318b0ba67.png](https://upload-images.jianshu.io/upload_images/5640239-c5d4f55318b0ba67.png)
取所有对象的键值;
object类型的长度:
循环一遍,用
![5640239-4eb661ef4bfb149b.png](https://upload-images.jianshu.io/upload_images/5640239-4eb661ef4bfb149b.png)
做表单,不小心空格,去空格的作用?
对原型链的理解:和document冒泡是一样的;数组中找不到,就冒泡到原型上,在没有,就是没有,
作用玉 一直往上查找
![5640239-910d367aca1883e8.png](https://upload-images.jianshu.io/upload_images/5640239-910d367aca1883e8.png)
![5640239-0510e7c0810614eb.png](https://upload-images.jianshu.io/upload_images/5640239-0510e7c0810614eb.png)
首先:事件行为由Windows触发的
ie9以下捕获不支持;
先记录两个
匹配的话,事件就是他触发的
true是捕获,flase:是冒泡
==
![5640239-7b9b0faaa1309b77.png](https://upload-images.jianshu.io/upload_images/5640239-7b9b0faaa1309b77.png)
如果版本低于9;就把js引进来;
能把优化做到最高
怎么把es6代码编译成es5:
![5640239-29bc0e7055c3def7.png](https://upload-images.jianshu.io/upload_images/5640239-29bc0e7055c3def7.png)
http://babeljs.io/
sass用来编译什么文件
babel用来编译js文件:
把 语法直接编译成js
![5640239-0ccb999e699756fb.png](https://upload-images.jianshu.io/upload_images/5640239-0ccb999e699756fb.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)
代码风格
![5640239-9bc413b0f3005164.png](https://upload-images.jianshu.io/upload_images/5640239-9bc413b0f3005164.png)
2.查看版本
![5640239-71d4a297bf408d16.png](https://upload-images.jianshu.io/upload_images/5640239-71d4a297bf408d16.png)
3.开始写helloword.js
![5640239-c1d841c3fe10912f.png](https://upload-images.jianshu.io/upload_images/5640239-c1d841c3fe10912f.png)
![5640239-862f591a74b80313.png](https://upload-images.jianshu.io/upload_images/5640239-862f591a74b80313.png)
怎么配置输出es5的语法:
![5640239-d30c55e2e933bf87.png](https://upload-images.jianshu.io/upload_images/5640239-d30c55e2e933bf87.png)
指定将日志输出到哪个文件:
把6转为5需要安装模块
![5640239-4f40dcdbad666e70.png](https://upload-images.jianshu.io/upload_images/5640239-4f40dcdbad666e70.png)
出现babel
![5640239-7612628417e26aba.png](https://upload-images.jianshu.io/upload_images/5640239-7612628417e26aba.png)
http://www.jscss.cc/2016/10/27/react-build.html
![5640239-8642604285db6340.png](https://upload-images.jianshu.io/upload_images/5640239-8642604285db6340.png)
![5640239-2f900e2dd68d7bc1.png](https://upload-images.jianshu.io/upload_images/5640239-2f900e2dd68d7bc1.png)
![5640239-5dd2e9a6f9c07135.png](https://upload-images.jianshu.io/upload_images/5640239-5dd2e9a6f9c07135.png)
![5640239-26c69215d0532afd.png](https://upload-images.jianshu.io/upload_images/5640239-26c69215d0532afd.png)
错误的安装例子
![5640239-5df5886586ac8ddf.png](https://upload-images.jianshu.io/upload_images/5640239-5df5886586ac8ddf.png)
复制进去,直接npm install
![5640239-2809f5a9cec92d72.png](https://upload-images.jianshu.io/upload_images/5640239-2809f5a9cec92d72.png)
![5640239-ee6027dcd227f5ff.png](https://upload-images.jianshu.io/upload_images/5640239-ee6027dcd227f5ff.png)
es6在浏览器里运行不了;!!!为什么
![5640239-0655a117feb151e3.png](https://upload-images.jianshu.io/upload_images/5640239-0655a117feb151e3.png)
模块化打包工具:webpack
html:就是jsx
![5640239-78be182084363d20.png](https://upload-images.jianshu.io/upload_images/5640239-78be182084363d20.png)
编译以后的
![5640239-a7c62ccfe814b356.png](https://upload-images.jianshu.io/upload_images/5640239-a7c62ccfe814b356.png)
好处:拼接字符串的时候:没有引号
http://slides.fe.ioteams.com/slide/show?id=20#/
![5640239-93572cba250af32a.png](https://upload-images.jianshu.io/upload_images/5640239-93572cba250af32a.png)
忘了全局的环境
![5640239-f7291cb94e22bde4.png](https://upload-images.jianshu.io/upload_images/5640239-f7291cb94e22bde4.png)
{
presets: [
"es2015",
"react",
"stage-2"
],
plugins: [
'transform-runtime',
'transform-es2015-classes'
]
}
}
![5640239-fa3f2f84ef8798fe.png](https://upload-images.jianshu.io/upload_images/5640239-fa3f2f84ef8798fe.png)
vim只能编辑文件
查看区域
![5640239-b2cc34e9882ac50d.png](https://upload-images.jianshu.io/upload_images/5640239-b2cc34e9882ac50d.png)
输入a:右键paste
退出:esc
wq:
![5640239-91802fe7e2346921.png](https://upload-images.jianshu.io/upload_images/5640239-91802fe7e2346921.png)
查看文件:
![5640239-bb1c8d72cef911ae.png](https://upload-images.jianshu.io/upload_images/5640239-bb1c8d72cef911ae.png)
![5640239-8868f381deba19fb.png](https://upload-images.jianshu.io/upload_images/5640239-8868f381deba19fb.png)
在编辑之前按a;把文本拿过来,即修改
退出编辑esc
退出文件:shift + :
又修改又保存并退出:wq:小写
如果有冲突,把文件删除掉(命令是什么?),在建一个
进行修改:
回车删除掉 多余的花括号
![5640239-174be9ee9a602c03.png](https://upload-images.jianshu.io/upload_images/5640239-174be9ee9a602c03.png)
如果存在,会修改,不存在,会创建
![5640239-3b503eca9832f772.png](https://upload-images.jianshu.io/upload_images/5640239-3b503eca9832f772.png)
声明的关系没有了
![5640239-7ea9b28d0c933aa1.png](https://upload-images.jianshu.io/upload_images/5640239-7ea9b28d0c933aa1.png)
把src的文件夹编译到build的文件夹底下去
![5640239-89adf6866b68b208.png](https://upload-images.jianshu.io/upload_images/5640239-89adf6866b68b208.png)
核心代码,虚拟技术:reactdom
![5640239-ee49c47cad5f7b67.png](https://upload-images.jianshu.io/upload_images/5640239-ee49c47cad5f7b67.png)
写完过后进行编译:在build里面查看:
![5640239-e598ee694674cbfe.png](https://upload-images.jianshu.io/upload_images/5640239-e598ee694674cbfe.png)
当做模块返回过去
![5640239-57c58148faeba1f9.png](https://upload-images.jianshu.io/upload_images/5640239-57c58148faeba1f9.png)
![5640239-027513b210577a84.png](https://upload-images.jianshu.io/upload_images/5640239-027513b210577a84.png)
移动过来再编译一下:
![5640239-af964806eb95c02e.png](https://upload-images.jianshu.io/upload_images/5640239-af964806eb95c02e.png)
返回一个包含arr对象的
![5640239-2f912fd012d9b918.png](https://upload-images.jianshu.io/upload_images/5640239-2f912fd012d9b918.png)
![5640239-77b54f0d2f481c50.png](https://upload-images.jianshu.io/upload_images/5640239-77b54f0d2f481c50.png)
处理后的,一个新的语法接收的
![5640239-686ac85429dc6d58.png](https://upload-images.jianshu.io/upload_images/5640239-686ac85429dc6d58.png)
虚拟的dom转换为字符串,呈现的在body里面:
1.创建文件,根据文件做项目打包:
![5640239-97879e1489a8639e.png](https://upload-images.jianshu.io/upload_images/5640239-97879e1489a8639e.png)
fis:
bat:百度,阿里,腾讯
对所有模块打包:http://webpack.github.io/
AMD和cmd是什么?
http://webpack.github.io/docs/tutorials/getting-started/
http://webpack.github.io/docs/configuration.html
入口文件去关联其他的文件
![5640239-d27ac4673fb49a57.png](https://upload-images.jianshu.io/upload_images/5640239-d27ac4673fb49a57.png)
重新写一个正常正式的js的文件来进行配置
![5640239-ade7ea6179bd1722.png](https://upload-images.jianshu.io/upload_images/5640239-ade7ea6179bd1722.png)
![5640239-284d0ef26a9289c2.png](https://upload-images.jianshu.io/upload_images/5640239-284d0ef26a9289c2.png)
![5640239-601164a0e74e6d35.png](https://upload-images.jianshu.io/upload_images/5640239-601164a0e74e6d35.png)
page1是我们定义输出的文件?
![5640239-8f7edf0b1fcdd09c.png](https://upload-images.jianshu.io/upload_images/5640239-8f7edf0b1fcdd09c.png)
最后一行是我们的
![5640239-ca0d934cdd45e54d.png](https://upload-images.jianshu.io/upload_images/5640239-ca0d934cdd45e54d.png)
在main.js中:第一个参数是函数的名字,怕在一个js里写很多模块
![5640239-b0481ab60c57bbf9.png](https://upload-images.jianshu.io/upload_images/5640239-b0481ab60c57bbf9.png)
自动压缩时文件名作为模块名,把 文件路径名当成了模块名
弹性的打包机制:支持三种命名规范
五分钟上手:http://seajs.org/docs/
![5640239-22885bd2b56d7fb4.png](https://upload-images.jianshu.io/upload_images/5640239-22885bd2b56d7fb4.png)
继续编译
![5640239-52bfe07b0a15dced.png](https://upload-images.jianshu.io/upload_images/5640239-52bfe07b0a15dced.png)
看代码
![5640239-b551d63c9c8887e9.png](https://upload-images.jianshu.io/upload_images/5640239-b551d63c9c8887e9.png)
自动创建?
![5640239-a95027241301a1e5.png](https://upload-images.jianshu.io/upload_images/5640239-a95027241301a1e5.png)
![5640239-9fe837f1ed4b9317.png](https://upload-images.jianshu.io/upload_images/5640239-9fe837f1ed4b9317.png)
对象里面是逗号,最后没有
![5640239-8df8418f00c0d686.png](https://upload-images.jianshu.io/upload_images/5640239-8df8418f00c0d686.png)
http://webpack.github.io/docs/using-loaders.html
![5640239-5b28c682b75d7f51.png](https://upload-images.jianshu.io/upload_images/5640239-5b28c682b75d7f51.png)
处理什么文件就引入
![5640239-22ba195b5c2da513.png](https://upload-images.jianshu.io/upload_images/5640239-22ba195b5c2da513.png)
模块处理gulp和pipe一样:管道的意思
![5640239-e03c3ffb08e653b8.png](https://upload-images.jianshu.io/upload_images/5640239-e03c3ffb08e653b8.png)
query: {
presets: [
"es2015",
"react",
"stage-2"
],
plugins: [
"transform-runtime",
"transform-es2015-classes"
]
}
代码有变更就会自动编译:
webpack -w -d:监听文件变化后自动编译
![5640239-cd4c2777044267ba.png](https://upload-images.jianshu.io/upload_images/5640239-cd4c2777044267ba.png)
直接压缩:webpack -p,编译时自动压缩
![5640239-7710473eb1e6b660.png](https://upload-images.jianshu.io/upload_images/5640239-7710473eb1e6b660.png)
![5640239-a6efa3e15b37932e.png](https://upload-images.jianshu.io/upload_images/5640239-a6efa3e15b37932e.png)