扩展的方法: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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏每日一篇技术文章

微信小程序_05 模板的使用

@import "../../templates/reward/reward.wxss";

31410
来自专栏linux系统运维

vim的介绍以及使用

13930
来自专栏mathor

软件破解逆向工程实战(二)

”打补丁“的方法可以修复程序bug,给程序添加新功能,“打补丁”的对象可以是文件、内存、数据、代码......

14220
来自专栏Aloys的开发之路

javadoc相关问题

欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinn...

13250
来自专栏C语言及其他语言

VC6使用简易图文教程

看到不少新同学初学C语言,不会用VC6,不知道C语言代码在哪里写,今天教大家如何使用VC6 首先,双击运行打开VC6编译器,如下图: ? 点击左上角:file-...

35670
来自专栏Java技术分享

Intellij IDEA调试功能使用总结

专注于Java领域,追求简洁,每天推送高质量技术文章,实用教程。

39670
来自专栏前端小吉米

看啥双拱门,来学 webpack 3啊

12820
来自专栏狂码一生

CentOS安装Nginx

一、gcc安装     yum -y install gcc-c++ 二、pcre pcre-devel安装     yum -y install pcre ...

577130
来自专栏魏艾斯博客www.vpsss.net

php 环境上传文件超过容量被限制怎么办

经常有网友在 php 环境中上传大容量文件,会遇到系统提示文件大小超过容量被限制上传,如果是老鸟自然会知道如何解决,对于新手来说这就好像学习 php 建站过程中...

18440
来自专栏青玉伏案

Git知识总览(六) Git分支中的远程操作实践

前几篇博客陆陆续续的讲了好多关于Git操作的内容, 其中在上篇博客聊了《Git中的merge、rebase、cherry-pick以及交互式rebase》,本篇...

363110

扫码关注云+社区

领取腾讯云代金券