专栏首页编程微刊扩展的方法: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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在react底下安装环境

    王小婷
  • 回调函数路由,模板渲染

    王小婷
  • cordova android

    王小婷
  • python pyqt5使用资源文件

    将图片资源编译为py文件 例如存在图片 a.png 和 b.png 都位于 ./img/ 路径下面,在 ./ 下新建一个文件 img_rcc.qrc 文件,输...

    用户5760343
  • 做一个简单的京东购物栏

    通过之前的补充标签和转义字符,我相信大家一定也熟练的掌握了这几个标签的用法和含义,接下来,我们就要学习别的标签了,那么会有人说,之前学的不就是标签了吗,那确实是...

    守护最温柔的金木
  • 浅谈深度学习:如何计算模型以及中间变量的显存占用大小

    博客原文:https://oldpan.me/archives/how-to-calculate-gpu-memory

    OLDPAN
  • eeglab中文教程系列(16)-DIPFIT对独立成分进行等价偶极子定位

    1.Setting up DIPFIT model and preferences

    脑机接口社区
  • eeglab中文教程系列(16)-DIPFIT对独立成分进行等价偶极子定位

    本教程为脑机学习者Rose发表于公众号:脑机接口社区(微信号:Brain_Computer),QQ交流群:903290195

    脑机接口社区
  • 聊聊分布式系统的时钟问题

    诸如此类的问题,还能提出很多,因此需要一个靠谱的时钟来保证分布式系统里事件的处理不会出错。

    哒呵呵
  • HTML5 拖放(Drag和drop)

    在工作当中,我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修,QQ空间装扮等,小到一些游戏等等随处可见拖放的使用场景。

    业余草

扫码关注云+社区

领取腾讯云代金券