12 2018 档案
摘要：通过前面的学习，对webpack有了更深的认识，故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境，就算是一个小案例吧。 注：此处使用的开发工具是Webstorm。 1.安装webpack 1.1 新建文件夹 在安装webpack之前，我们先建立一个文件夹,并利用开发工
阅读全文
摘要：在webpack1或者webpack2版本中，若想在webpack环境中加载Json文件，则需要加载一个json-loader的loader进来的。但是在webpack3.x版本中，则不需要在另外引入了，也可使用Json。 下面以webpack3.x为例来说明在webpack中如何使用json。（主
阅读全文
摘要：工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片，而在打包时保留这些静态资源，直接打包到指定文件夹中。此时就需要使用到copy-webpack-plugin这个插件了。 copy-webpack-plugi
阅读全文
摘要：1.优化第一步--选用引入方式 在前面的学习中我们对于如何引入第三方类库（Jquery）推荐了两种方式，第一种是import引入的方式，第二种是ProvidePlugin插件。那两种引入方法有什么区别那? import引入方法：引用后不管你在代码中使用不使用该类库，都会把该类库打包起来，这样有时就会
阅读全文
摘要：在前面的学习中，我们一直使用webpack-dev-server充当（本地）服务器和完成打包任务，但是当出项目团队联合开发，共同使用一个服务器时，这时候我们需要实时进行打包以确保团队间能进行联调或者进行相关代码的合并工作时，每次保存后手动打包显然效率太低，我们需要的是代码发生变化后，只要保存，web
阅读全文
摘要：在日常的开发中，总避免不了引入第三方的框架，比如常用的JQuery，此节我们来学习一下如何优雅并正确的用webpack引入第三方库。 这里我们以第三方框架JQuery为例： 1、在入口文件中引入 1.1 安装JQuery 由于Jquery最终要在生产环境中使用，所以要使用–save进行安装。 1.2
阅读全文
摘要：搞个小例子便于学习： 具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置，单独拿出来制作成一个模块。 1.在根目录新建一个config文件，然后新建webpack.entry.js文件，代码如下： webpack.entry.js： 2.entry模块中的代码
阅读全文
摘要：1. 概述 生产环境和开发环境所需依赖是不同： --开发依赖:就是开发中用到而发布时用不到的。在package.json里面对应的就是devDependencies下面相关配置。 --生产依赖: 就是比如我们的javascript使用了jquery,而我们最终的程序也需要这个包(最终程序正常运行需要
阅读全文
摘要：在程序开发中，调试程序是最频繁的，那使用了webpack后，所有的代码都打包到了一起，这给调试带来了困难，但是webpack在设计时就已经考虑好了这点，它支持生产Source Maps来方便我们的调试。 Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式，在Chrome和F
阅读全文
摘要：`Babel`是什么？ 是一个编译 的平台，它的强大之处表现在可以通过编译达到以下目的： 使用下一代的javaScript代码(ES6,ES7….)，即使这些标准目前并未被当前的浏览器完全支持。 使用基于JavaScript进行了扩展的语言，比如React的JSX。 1.如何让webpack支持ba
阅读全文
摘要：在平时的项目开发中，我们会引入一些框架，比如： ，但是在项目中通常我们只使用它的一小部分，还有部分是冗余的。更有甚有时候需求更改，带来 结构的更改，这时候我们可能无暇关注 样式，会造成很多冗余的 。我们得想办法消除冗余的CSS,如果靠人工去剔除，吃力又容易出错,因此，此节我们来学习一下用webpac
阅读全文
摘要：什么是属性前缀 为了浏览器的兼容性，有时候我们必须加入 ,` ms o moz`这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 例如： 使用插件来帮助我们进行前缀的自动添加，会大大提升我们的开发效率，提供编码效率。 此次是关于如何通过postcss loader给css3属性自动添加
阅读全文
摘要：1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader，（也可以使用cnpm安装） 因为sass-loader依赖于node-sass，所以需要先安装node-sass 1.1 node-sass 1.2 sass-loader 注意
阅读全文
摘要：写在前面：在前面我们对css打包和分离进行了描述。此节我们开始学习如何对less文件进行打包和分离。 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。 Less知识学习 1.Le
阅读全文
摘要：补充，在前面的服务启动执行命令中，我们在package.json中的配置信息为： 该种方式在启动服务后还需自己访问相关url，这很不友好。此处我们新增一些配置，保证在我们启动服务后自动访问url并渲染，配置如下： 这样就实现了服务启动浏览器也会自动打开。 正文： 在前端开发中，我们常用img标签来引
阅读全文
摘要：前言： 在上一节当中，我们把小图片打包成Base64格式（打包到了js当中）。我们也算是对webpack对图片的打包有个基本了解。 本节我们准备把css从JavasScript代码中分离出来,这会遇到两个问题，一是如何分离，二是分离之后的图片路径问题，下面我们逐一破解。 1.把css从JavasSc
阅读全文
摘要：前言：此节的开展是在上一节的基础上进行的，（每一节都是从无到有编写关于此节的知识），最后会附上相关完整代码。上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文件夹，把需要的图片放入images文件夹。图片下载 2.新增标签 在index.html文件中增加一
阅读全文
摘要：从前面几节到现在，其实我们的项目结构是有问题的，因为我们直接把index.html文件放到了dist文件夹目录下。这肯定是不正确的，应该放到我们src目录下，然后打包到dist目录下，前面为了学习，才把index.html放到了dist目录下。 此节我们就来完成把开发环境中的html文件打包到我们的
阅读全文
摘要：实际开发中，在项目上线之前，我们编写的js代码是需要进行压缩的，我们可以采取压缩软件或者在线进行压缩，这不是我们的重点，在webpack中实现JS代码的压缩才是本节的核心。 通过webpack中可实现的JS代码压缩是通过插件的方式实现的 uglifyjs-webpack-plugin(JS压缩插件，
阅读全文
摘要：写在前面：为了兼容，此处的webpack版本为3.6.0、webpack-dev-server版本为2.9.7、css-loader版本为2.0.0、style-loader版本为0.23.1，若在下列安装后运行出错，一般是版本问题，可以安装此处的指定版本来解决。 1.前言 webpack把多个文件
阅读全文
摘要：写在前面： （1）为了防止版本兼容问题，此处的webpack版本与之前的一致为：webpack@3.6.0。同时这里我们安装的webpack-dev-server版本是2.9.7版本。 （2）之前已经安装了node.js 在此之前我们一直采用live-server充当本地服务器，其实这与webpac
阅读全文
摘要：在上一节中我们只是简单的尝了一下webpack的鲜，对其有了基本的了解，对于上一节当中的打包方式，在实际开发中并不使用，而是通过webpack的配置文件的方式进行设置的，所以该节就在上一节的基础上学一下配置文件的大体结构以及入口、出口文件的配置。 1.新建配置文件webpack.config.js
阅读全文
摘要：写在前面：该部分的安装都是基于windows系统的，且此处的webpack的版本为：3.6.0。 1.安装webpack 1.1 安装方法： 用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码： 第一句是建立一个文件夹，第二句是进入这个文件夹。这个文件夹就
阅读全文
摘要：1、什么是webpack （1）webpack是一个模块打包工具,它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责
阅读全文
摘要：module.exports和exports是属于 CommonJS 模块规范，export和export default是属于ES6语法。 module.exports和exports导出模块，用require引入模块。 export和export default导出模块，import导入模块。
阅读全文
摘要：使用git同时提交到多个远程库的操作方式为： 比如我需要你将同一份代码提交到如下的两个库中： https://gitee.com/FelixBinCloud/recruit.git https://git.coding.net/FelixBinCloud/recruit.git （1）先添加第一个仓
阅读全文
摘要：ES6的模块化操作主要包括两个方面。 （1）export :负责进行模块化，也是模块的输出。 （2）import : 负责把模块引，也是模块的引入操作。 export的用法： export可以让我们把变量，函数，对象进行模块化，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化
阅读全文
摘要：（2）使用ES6提供的class改写为： 2.现在来看看es6的类如何使用？ （1）类的声明 先声明一个最简单的Animal类，类里只有一个print方法，方法中打印出传递的参数。 （2）类的使用 我们已经声明了一个类，并在类里声明了print方法，现在要实例化类，并使用类中的方法。 输出结果为：熊
阅读全文
摘要：1.产生原因 在前端开发中，最常见的的就是"回调",我相信很多人对于这个"回调"可谓是印象深刻呢。究其原因是因为层层回调会造成所谓的“回调地狱 (callback hell)”（最明显的就是代码的层层嵌套） 2.解决办法 实解决回调地狱的办法有很多，从代码书写层面就可以将绝大部分回调代码写的尽量简单
阅读全文
摘要：1.理解什么是预处理？ 当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数，Proxy的存在就可以让我们给函数加上这样的钩子函数。 Proxy进行预处理可以简单理解为：执行方法前，先预处理代码（预热工作）。 2.对比引入Pro
阅读全文
摘要：1.map数据结构出现的原因？ JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了能实现将对象作为键值对的key，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限
阅读全文
摘要：一、Set 1.Set是什么？ Set是ES6 提供的一种新的数据结构。类似于数组。 2.Set能解决什么问题 Set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个，相当于去重。 3.怎么使用Set相关东西 Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据
阅读全文
摘要：在ES5中 对象属性名都是字符串，这容易造成属性名的冲突，比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突，于是 ES6 引入了Symbol。Symbol是一种新的原始数据类型，表示独一无二的值。它是继undefined、nu
阅读全文
摘要：1.对象赋值 es5中的对象赋值方式如下： 结果为： ES6允许把声明的变量直接赋值给对象，例如： 结果与上述相同。 2.对象Key值构建 有时候我们会在后台取出key值，而不是我们前台定义好的，这时候我们可以我们可以把后台定义的key值重新构建返回给后台。 在前端我们可以用[ ] 的形式，进行对象
阅读全文
摘要：1.对象的函数解构 ES6为我们提供了这样的解构赋值使在前后端分离时，后端返回来JSON格式的数据，前端可以直接把这个JSON格式数据当作参数，传递到函数内部进行处理。比如： 结果为： 2.数组的函数解构 声明一个数组，然后写一个方法，最后用…进行解构赋值。 3.in的用法 in是用来判断对象或者数
阅读全文
摘要：1.默认值 在ES6中给我们增加了默认值的操作相关代码如下： function add(a,b=1){ return a+b; } console.log(add(1)); 可以看到现在只需要传递一个参数也是可以正常运行的。 输出结果为：2。 2.主动抛出错误 ES6中我们直接用throw new
阅读全文
摘要：1.JSON数组格式转换 JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式，json数组格式如下： 这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。 把上边的JSON代码使用A
阅读全文
摘要：下面是针对ES6新增的一些数字操作方法进行简单梳理。 1.数字判断和转换 （1）数字验证Number.isFinite( xx ) 使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。 （2）NaN验证 NaN是特殊的非
阅读全文
摘要：1.字符串模板对比引入： （1）之前我们也可以使用JavaScript输出模版字符串，通常是下面这样的： var restult= "姓名： <b>"+person.name+"</b>" 但是我们可以看到：这样的传统做法需要使用大量的“”（双引号）和 + 来拼接才能得到我们需要的模版。但是这样是十
阅读全文
摘要：运算符可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。 运算符有两种：对象扩展运算符与rest运算符。 1.对象扩展（ spread）运算符（...） （1）解决参数个数问题 以前我们编程是传递的参数一般是确定，否则将会报错或者异常，如下： 参数固定，多余的参数会出错。
阅读全文
摘要：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。 解构有三种类型： 1.数组的解构赋值 （1）简单的数组解构 以前，我们给变量赋值是直接单个指定值，比如： 数组解构的方式来进行赋值，如下： 总结：从数组中提取值，按照位置的对象关系(次序)对变量赋值。 （2）数组模式和赋值
阅读全文
摘要：在ES5中我们在声明时只有一种方法，就是使用var来进行声明，ES6对声明的进行了扩展，现在可以有三种声明方式。 （1）var：它是variable的简写，可以理解成变量的意思。 （2）let：它在英文中是“让”的意思，也可以理解为一种声明的意思。 （3）const：它在英文中也是常量的意思，在ES
阅读全文
摘要：前言： 1.es6的简单介绍： ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 2.为什么要搭建ES6的开发环境？ 因为至今各
阅读全文
摘要：第一节：前言： 1.JavaScript 的发展简史图： 2.关于node与deno: （1）Node与Deno 的区别：Node 可以工作，而 Deno 不行,Deno 只是一个原型或实验性产品。 （2）Deno 的目标是不兼容 Node，而是兼容浏览器。Deno 不是要取代 Node.js，也不
阅读全文
浙公网安备 33010602011771号