原文地址:→传送门 写在前面 现在es6很流行,尽管各大浏览器都还不能支持它的新特性,但是小伙伴们还是很中意它呀,于是小小的学习的一下 Babel 这里我们不介绍es6相关内容,只是说下入坑前奏,记录下如何使用babel来对es6进行转码~ 1.准备一个项目(文件夹) 进入到你的项目根目录下,使用下面命令初始化生成一个package.json文件 npm init 2.安装babel 使用下面命令安装全局babel-cli npm install --global babel-cli 3.设置转…

Hbuilder是一个不错的H5开发IDE. Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试. 如果可以有办法在Hbuilder中直接使用ES6,并通过Babel自动转化为ES5,那么对于使用ES6+Hbuilder进行开发调试将会非常方便. 简单做了些配置,可以通过以下步骤达到目的. Hbuilder配置 - 打开ES6 安装NPM 下载NPM安装 通过NPM安装babel-cli npm install --global babel-cli 安装…

低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要polyfill, 比如Promise,string实例的includes方法等.即使在低版本浏览器中,通过babel-runtime的polyfill也是可以转换的,但是事不竟然,项目在IE9浏览器上报错,错误如下截图: 很明显,项目中使用了Promise,但是IE9又不支持该新特性,所以导致报错. 那么…

webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构建和babel,可以使用最新js语法进行开发,最后自动编译成用于浏览器或node环境的代码. webpack中使用babel 配合webpack使用babel前,需要首先使用npm init初始化一个项目,npm install -g webpack安装webpack(全局安装是为了在命令行使用we…

什么是babel? babel是一个JavaScript编译器. Babel是一个工具链,主要用于将ECMAScript 2015+代码转换为向后兼容的旧浏览器或环境中JavaScript版本. 注解:传统的编译是指转化成可执行的代码,也就是二进制代码.但是对于前端来说,因为JS是解释性语言,对于浏览器或者Node来说就是可执行的代码. 因此,前端的编译就是指将语言转化为浏览器或Node可以执行的代码,也就是能执行的js语句.因为现在的很多浏览器未能全面支持ES6/7/8,基本都全部支持ES5了…

最近在使用babel-loader的时候,发生了一些错误,现在的babel-loader版本已经是8.0.0,更新到这个版本之后,如果还按照以前的安装依赖的方法: cnpm install --save-dev babel-loader babel-preset-env babel-preset-es2015 babel-preset-react 会发生如下报错: 说明现在babel-loader的版本需要的是@babel/core@^7.0.0,如果不进行处理而进行打包,会报如下错误: 因此我…

抽象语法树 什么是抽象语法树? It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code. 抽象语法树是源代码语法结构的一种抽象表示.它以树状的形式表现编程语言的语法结构,树上的每个节点…

为什么要写这个loader 我们在日常开发中经常用到async await去请求接口,解决异步.可async await语法的缺点就是若await后的Promise抛出错误不能捕获,整段代码区就会卡住.从而使下面的逻辑不能顺利执行.也许会有人说,卡住就是为了不进行后续的代码,以免造成更大的错误,可大多数情况下需要catch住错误并给出一个边界值使代码正常执行. 我以前经常常常会这么写: const request = async (){ const { data = [] } = await g…

跨年前两天,Dan Abramov在Twitter上提了一个问题: JS社区毫不犹豫的抛出了它们对于新技术的预期与期待,本文内容也是总结自Twitter的回复,按照流行度降序排列.有一个尚未确定的小点是既然函数式编程已不再是少数派,是否要把它踢出红毯呢? WebAssembly 去年笔者就表示过了对于WebAssembly的期待,WebAssembly就是面向Web平台的底层代码.其初衷是希望能够使所有语言都能够编译运行到Web平台,这一点对于很多函数式编程.响应式编程的粉丝充满吸引力.特别是随…

2017值得一瞥的JavaScript相关技术趋势从属于笔者的Web 前端入门与工程实践,推荐阅读2016-我的前端之路:工具化与工程化获得更多关于2016年前端总结.本文主要内容翻译自,笔者对于每个条目进行了些许完善. 本文中提及的这些趋势可能离大部分开发者还很远,或者说离真正的大规模工程化应用还很远,不过不妨碍我们提前两三年了解下.本文仅代表原作者个人看法,不喜留言轻喷,译者也很好奇大家对这个列表的看法. 跨年前两天,Dan Abramov在Twitter上提了一个问题: JS社区毫不犹豫的…

关于本文: 原文地址 翻译地址 译者:野草 本文发表于前端早读课[第897期] 你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的参数,你传了一个String类型?JavaScript的弱类型是这一类bug的罪魁祸首,静态类型语言中不存在此类bug. Flow就是JavaScript的静态类型检查工具,由Facebook团队于2014年的Scale Conference上首次提出.该库的目标在于检查JavaScript中的类型…

说在前面 create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Less 的.如果我们的项目必须要使用 Less 呢,这就需要我们手动集成一下.本篇主要针对集成的过程做一个简要记录. 环境准备 本小节先用 create-react-app 构建一个全新的 React 项目作为实验环境. 如果您之前未曾使用过 create-react-app,请先通过如下命令全局安装(…

本文将介绍Flow及其主特性.下面分别从如何安装设置,如何添加类型注释,如何在运行时自动去掉注释等方面来介绍. 安装 目前Flow兼容的操作系统有Mac OS X,Linux(64位),Windows(64位).最简单的安装方式是通过 npm: npm install --save-dev flow-bin 然后在package.json文件中的scripts 项添加: "scripts": {  "flow": "flow"} 完成之后,就可以…

file loader介绍:https://www.webpackjs.com/loaders/file-loader/ babel loader介绍:https://webpack.js.org/loaders/babel-loader/ webpack-dev-server介绍:https://www.webpackjs.com/configuration/dev-server/  ,https://www.jianshu.com/p/73d74445e5c5 今日在学习百度前端学院的一个小…

这些年一直不断接触学习 Node 技术栈,个人的技术开发学习兴趣也越来越倾向 node 流.也许是由于英语的关系,也许是因为墙增加了学习国外一手资料的难度,加上现在流行的 web 开发技术并不太容易上手.所以我希望通过一系列文章来介绍现在 node 全栈开发的概念.工具以及开发方式等等. 个人是从2014年来到纽村后,才开始正式学习 Web 开发技术.2015年因为工作需要,开始学习 Ruby on Rails,至今仍主要使用 Rails 从事 web 开发工作.所以从我开始正式学习前端技术时,…

Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地址 从头开始建立一个React App - 项目基本配置 npm init 生成 package.json 文件. 安装各种需要的依赖: npm install --save react - 安装React. npm install --save react-dom 安装React Dom,这个包是…

babelrc 配置文件 { "presets": [ [ "env", { "modules": false, "useBuiltIns": true, "targets": {"browsers": ["last 2 versions", "safari >= 7", "ie>=9"]} } ], "s…

欢迎转载,请支持原创,保留原文链接:http://blog.ilibrary.me http://blog.ilibrary.me/2016/12/25/react-native-internal (2018-10-26) (2018-06-28, 更新) 这是一个深坑, 慎入! 本来是计划花半年时间写一本深入讲解react native技术细节的书的,内容(见下面TOC)和年度计划都拟好了,结果人算不如天算,计划拟好以后精力就转移到公司的情报挖掘(机器学习)项目上去了,移动端的代码已经接近两年…

Sublime Text 是每个开发者工具箱中都应该有的一个强大的应用.它是一个跨平台的.高定制化的.高级的文本编辑器,在功能强大的 集成开发环境(众所周知地消耗资源)和类似于 Vim 或 Emacs 的命令行编辑器(学习成本非常高)之间取得了很好的平衡. 使得 Sublime 如此强大的原因之一就是其可扩展的插件架构.开发者可以很容易地扩展 Sublime 的核心功能,添加一些新特性,比如补全代码.嵌入远程接口文档.Sublime Text 不带有可以启用的插件 – 它们通常通过第三方包管理器…

第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] npm install webpack –save-dev [下载webpack] 第二步: mkdir src [创建源文件] mkdir dist [创建打包后的文件] 第三步: 手动创建index.html文件 在index.html中引入打包后的json文件 我们设置为 bundle.js文件 …

深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 五:添加插件来替代环境变量 六:添加 UglifyJS来压缩我们js的代码 七:监听文件变化的插件 --- rollup-watch 八:开启本地服务的插件 --- rollup-plugin-serve 九:实时刷新页面 --- rollup-plugin-livereload 十. 安装同时运…

提取第三方库,缓存,减少打包体积 1. dll动态链接库, 使用DllPlugin DllReferencePlugin,将第三方库提取出来另外打包出来,然后动态引入html.可以提高打包速度和缓存第三方库 这种方式打包可以见京东团队的gaea方案 https://www.npmjs.com/package/gaea-cli 2.webpack4的splitChunks或者 webpack3 CommonsChunkPlugin 配合 externals (资源外置) 主要是分离 第三方库,自定…

Flow入门初识 Flow是facebook出品的JavaScript静态类型检查工具. 由于JavaScript是动态类型语言,它的灵活性也会造成一些代码隐患,使用Flow可以在编译期尽早发现由类型错误引起的bug,这种方式非常有利于大型项目源码的开发和维护. 一. Flow的安装 npm install --g flow-bin 创建一个项目文件夹./demo进入项目文件夹. npm init -y创建package.json文件,在文件中的scripts中添加: "scripts"…

在 jsComplete,我们管理一个专门用于帮助编程学习者 slack 帐户.我们常常会收到一些有趣的问题,但大多数问题都是常见问题. 我创建这个资源为了帮助 React.js学习者遇到这些常见的问题时提供一定帮助.在这里可以快速找到一些常见问题的解决方案,而不是一,遍又一遍去找解决方法,我会持续更新这些常见的问题. 1. 组件的名称开头要大写 React 组件名称必须具有以大写字母开头. 如果组件名称不以大写字母开头,则组件使用将被视为内置元素,例如 div 或 span. 例如: clas…

模块热替换(hot module replacement 或 HMR) 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新所有类型的模块,而无需完全刷新 HMR 不适用于生产环境,这意味着它应当用于开发环境. 如何启用:(1)更新webpack-dev-server (2)使用webpack内置的HMR插件(HotModuleRelacementPlugin) //package.json devtool: 'in…

1.下载node.js Node.js官网下载 , 安装: 安装成功后在控制台输入node -v 可查看当前版本: $ node -v v10.15.0 输入npm -v查看npm版本: $ npm -v 2.创建项目 1.安装各种需要的依赖: npm install --save react - 安装React. npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM.这里提一下用React Native的话,这里就是安装rea…

1.python自动化的一些测试框架 1).unitest(也称为PyUnit)  地址:https://docs.python.org/2/library/unittest.html 2).Nose 地址:http://nose.readthedocs.io/en/latest/ 3).Pytest https://docs.pytest.org/en/latest/ 2.介绍一下这几个框架的内容: 1).Pyunit:使我们具备创建测试用例,测试套件,测试夹具的能力. 2).Nose:此框架…

webpack 3 零基础入门教程 http://webpackbook.rails365.net/466996(文本) https://www.rails365.net/movies/webpack-3-ling-ji-chu-ru-men-shi-pin-jiao-cheng-1-jie-shao (视频) 项目文件夹: 根目录: src下的目录: dist下打包后生成的目录: 下面是详细的流程步骤: 1.建立项目名 mkdir 项目名 2.定位项目名里面 cd 项目名 3.生成packag…

启动 mysql 镜像 docker run -d -p 127.0.0.1:3306:3306 –name mysql -v /Users/flyrPc/docker/mysql/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 mysql:latest 命令介绍: -d(Detached):表示容器将以后台模式运行,所有I/O数据只能通过网络资源或者共享卷组来进行交互. -p 127.0.0.1:3306:3306:将主机(127.0.0.1…

RABBITMQ详解(一)------简介与安装(DOCKER) 刚刚进入实习,在学习过程中没有接触过MQ,RabbitMQ 这个消息中间件,正好公司最近的项目中有用到,学习了解一下. 首先什么是MQ: MQ(message queue) : MQ是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据(消息)来通信,而无需专用连接来链接它们.消息传递指的是程序之间通过在消息中发送数据进行通信,而不是通过直接调用彼此来通信,直接调用通常是用于诸如远程过程调用的技术.排…