一、什么是webpack？ webpack是一个现代JavaScript应用程序的静态模块打包器，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个文件组合成的文件，webpack专注构建模块化项目。 webpack可以看做是模块打包机：他做的事情是，分析项目，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（scss， TypeScript等），并将其打包为合适的格式以供浏览器使用。 二、四个核心概念 entry：一个可执行文件或库的入口文件。 chunk：多个文件组成的一个代码块。例如把一个可执行文件和他所有依赖的模块组合为一个chunk，这体现了webpack的打包机制。 loader：文件转换器。例如把es6转换为es5，scss转换为css。 plugin：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。 三、webpack构建流程 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。 在解析文件递归的过程中根据局文件类型和loader配置找出合适的loader用来对文件进行转换。 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。 输出所有chunk到文件系统。 四、webpack和grunt、gulp的不同 1. 概念区别： （1）gulp/grunt是一种能够优化前端的开发流程的工具。 （2）webpack是一种模块化的解决方案。 2. 工作方式的区别： （1）Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。工具之后可以自动替你完成这些任务。 （2）Webpack的工作方式：把你的项目当做一个整体，通过给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loader处理他们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 3. 基于类型的区别 （1）grunt和gulp是基于任务和流（task、stream）的。类似jQury，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。 （2）webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理不同的文件，用plugin来扩展webpack功能。 五、几种常见的loader file-loader：把文件数出到一个文件夹中，在代码中通过相对URL去引用输出的文件。 url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。 source-map-loader：加载额外的source map文件，以方便断点调试。 image-loader：加载并且压缩图片文件。 babel-loader：把es6转换成es5。 css-loader：加载CSS，支持模块化、压缩、文件导入等特性。 style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。 eslint-loader：通过ESLint检查JavaScript代码。 六、webpack的优缺点 优点 专注处理模块化的项目，能做到开箱即用，一步到位。 可通过plugin扩展，完整好用又不是灵活。 使用场景不局限于web开发。 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展。 良好的开发体验。 缺点 webpack的缺点是只能用于采用模块化开发的项目。 七、什么是模块的热更新？ 模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。 DevServer中通过hot属性可以控制模块的热替换。 1、通过配置文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const webpack = require('webpack'); const path = require('path'); let env = process.env.NODE_ENV == "development" ? "development" : "production"; const config = { mode: env, devServer: { hot:true } } plugins: [ new webpack.HotModuleReplacementPlugin(), //热加载插件 ], module.exports = config; |
2、通过命令行
|
1 2 3 4 |
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "NODE_ENV=development webpack-dev-server --config webpack.develop.config.js --hot", }, |
八、懒加载（按需加载路由） webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。 不进行页面按需加载的引入方式：
|
1 |
import home from '../../common/home.vue' |
进行页面按需加载的引入方式：
|
1 |
const home = r =>require.ensure([ ],() =>(require('../../common/home.vue'))) |
九、通过webpack处理长缓存 浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output中输出的文件指定chunkhash，并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleldsPlugin使再次打包文件名不变。 作者：李丹linda 链接：https://www.jianshu.com/p/86a3c35079cc 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Detailsjest 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能。 安装与配置
|
1 2 |
npm install --save-dev jest npm install -g jest |
运行命令 jest 后会自动运行项目下所有.test.js和.spec.js这种格式的文件。涉及到运用 ES 或 react 的，要与babel相结合，加上.babelrc文件即可。jest的配置默认只需要在package.json中配置即可，当然也可以用独立的配置文件。 我们这里直接将 jest 的运行范围限定在test文件夹下，而不是全部，所以在package.json中加入如下配置：
|
1 2 3 |
"jest": { "testRegex": "/test/.*.test.jsx?$" } |
注意到这里的匹配规则是正则表达式 基本用法 和之前介绍的 mocha 和 chai 的功能很像，甚至可以兼容部分 mocha 和 chai 的语法。可以这么写
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from 'react' import { shallow } from 'enzyme' import CommentItem from './commentItem' describe('测试评论列表项组件', () => { // 这是mocha的玩法，jest可以直接兼容 it('测试评论内容小于等于200时不出现展开收起按钮', () => { const propsData = { name: 'hj', content: '测试标题' } const item = shallow(<CommentItem {...propsData} />) // 这里的断言实际上和chai的expect是很像的 expect(item.find('.btn-expand').length).toBe(0); }) // 这是jest的玩法，推荐用这种 test('两数相加结果为两个数字的和', () => { expect(3).toBe(3); }); } |
jest与eslint检测 如果看了上面的代码会发现我没有引用任何类似于
|
1 |
import * from 'jest' |
的代码，而那个expect是没有定义的。 这段代码直接运行jest命令没有任何问题，但是eslint会检测出错，对于这种情况，我们可以再eslint配置文件.eslintrc中加入以下代码：
|
1 2 3 |
"env": { "jest": true }, |
jest的断言 jest有自己的断言玩法。除了前面的代码中已经写到的
|
1 |
expect(x).toBe(y)//判断相等，使用Object.is实现 |
还有常用的
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
expect({a:1}).toBe({a:1})//判断两个对象是否相等 expect(1).not.toBe(2)//判断不等 expect(n).toBeNull(); //判断是否为null expect(n).toBeUndefined(); //判断是否为undefined expect(n).toBeDefined(); //判断结果与toBeUndefined相反 expect(n).toBeTruthy(); //判断结果为true expect(n).toBeFalsy(); //判断结果为false expect(value).toBeGreaterThan(3); //大于3 expect(value).toBeGreaterThanOrEqual(3.5); //大于等于3.5 expect(value).toBeLessThan(5); //小于5 expect(value).toBeLessThanOrEqual(4.5); //小于等于4.5 expect(value).toBeCloseTo(0.3); // 浮点数判断相等 expect('Christoph').toMatch(/stop/); //正则表达式判断 expect(['one','two']).toContain('one'); //不解释 function compileAndroidCode() { throw new ConfigError('you are using the wrong JDK'); } test('compiling android goes as expected', () => { expect(compileAndroidCode).toThrow(); expect(compileAndroidCode).toThrow(ConfigError); //判断抛出异常 }） |
更多断言玩法 jest的 mock 介绍了jest替代mocha和chai的部分，那么接下来就看看如何替代sinon。 下面是官网的示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function forEach(items, callback) { for (let index = 0; index < items.length; index++) { callback(items[index]); } } const mockCallback = jest.fn(); forEach([0, 1], mockCallback); // 判断是否被执行两次 expect(mockCallback.mock.calls.length).toBe(2); // 判断函数被首次执行的第一个形参为0 expect(mockCallback.mock.calls[0][0]).toBe(0); // 判断函数第二次被执行的第一个形参为1 expect(mockCallback.mock.calls[1][0]).toBe(1); |
从上面可以看到这种玩法很类似于sinon的 sinon.spy()。当然也有类似于stub返回值的那种玩法，更多的请参考 jest mock的更多玩法 mock文件和css module的问题 如果js文件中引用了css或者本地其他文件，那么就可能测试失败。为了解决这个问题，同时也为了提高测试效率：
|
1 2 3 4 5 |
"jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/config/fileMock.js", "\\.(css|less)$": "identity-obj-proxy" } |
而fileMock.js文件内容为：
|
1 |
module.exports = 'test-file-stub'; |
然后安装identity-obj-proxy即可：
|
1 |
npm install --save-dev identity-obj-proxy |
jest与别名 在webpack中经常会用到别名，而jest测试时，如果文件中引用了别名会出现找不到文件的问题。毕竟jest测试时没有经过webpack处理。对于以下玩法
|
1 2 3 4 5 |
resolve: { alias: { common: path.resolve(__dirname, 'plugins/common/') } } |
可以通过
|
1 2 3 4 5 6 |
"jest": { "testRegex": "./src/test/.*.test.js$", "moduleNameMapper": { "^common(.*)$": "<rootDir>/plugins/common$1", } } |
这个和之前 mock文件和css module的问题 一样，都是使用了moduleNameMapper这个属性 生成测试覆盖率报告 只需要在jest命令后加入 --coverage即可
|
1 |
jest --coverage |
13人点赞 前端单元测试 作者：我向你奔 链接：https://www.jianshu.com/p/eaaf07c1b88f […]
View Details安装cnpm：
|
1 |
npm install -g cnpm --registry=https://registry.npm.taobao.org |
安装完成后报错：无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本 解决：管理员身份运行power shell，再输入：
|
1 |
set-ExecutionPolicy RemoteSigned |
输入A，回车 from:https://www.cnblogs.com/yifamily/p/11853259.html
View DetailsVue.js 是一个用于创建用户界面的开源 JavaScript 框架，也是一个创建单页应用的 Web 应用框架。旨在更好地组织与简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 Vue.js 是一款流行的 JavaScript 前端框架，旨在更好地组织与简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 历史 在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的/r/javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。 特性 组件 组件是 Vue 最为强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在 Vue 中，组件是基础 HTML 元素的拓展，可方便地自定义其数据与行为。 模板 Vue 使用基于 HTML 的模板语法，允许开发者将 DOM 元素与底层 Vue 实例中的数据相绑定。所有 Vue 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应式系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 响应式设计 响应式是指 MVC 模型中的视图随着模型变化而变化。在 Vue 中，开发者只需将视图与对应的模型进行绑定，Vue 便能自动观测模型的变动，并重绘视图。这一特性使得 Vue 的状态管理变得相当简单直观。 过渡效果 […]
View Details原文链接： medium.freecodecamp.com image 我采访了尤雨溪，著名渐进式 JavaScript 框架 vuejs.org 的创造者。尤雨溪现通过 Patreon 平台众筹全职开发 Vue 的资金。他还曾在 Google 和 Meteor 工作过。 这篇文章 最初 发布在 Between the Wires，这是一个采访系列，专门采访那些为程序员开发产品的人。 和我们讲讲你的童年和你的家乡吧 好的，我出生在中国，我的家乡叫无锡，一个中等规模的城市，离上海很近。然后我在上海念了三年高中，因此经常两地来回跑。高中毕业后我去了美国念大学。我感觉我接触电脑比较早，但是我当时并没有真正开始编程。我对游戏更感兴趣，我在高中时，就经常玩 Flash，因为我非常喜欢制作互动的效果来讲述故事。 1996 年尤雨溪和他的第一台电脑 谈一谈你的第一次编程经历？ 「JavaScript 很吸引我，因为它能够快速构建一些东西并分享给别人。把它放在网上，通过一个网址，任何有浏览器的人都可以看到。这就是吸引我开始 Web 开发和 JavaScript 编程的原因。」 当我在美国上大学的时候，老实说，我不知道我想要做什么，而且我的专业是室内艺术和艺术史。当我快毕业时，我感觉很难找到和专业相关的工作。 我盘算着或许我可以去一个适合我的硕士课程，学习更多的技能。我去了 Parsons，读了一个美术设计和技术的硕士。这是一个非常好的专业，因为每个人都是既学习设计也学习编程。他们会教一些比如 openFrameworks，处理，动画算法之类的课程，而且你也必须写应用程序和交互界面。 Parsons 没有真正涉及很多的 JavaScript，但是 JavaScript 很吸引我，因为它能够快速构建一些东西并分享给别人。把它放在网上，通过一个网址，任何有浏览器的人都可以看到。这就是吸引我开始 Web 开发和 JavaScript 编程的原因。 当时 Chrome experiments 这个网站刚刚发布，我深深的被震撼了。我立即开始学习 JavaScript，并开始开发类似 Chrome experiments 的项目。我把这些项目放在我的简历上，然后被 Google 创意实验室的招聘人员注意到了。我加入了Five program。每年创意实验室会招五名应届毕业生，组成一个小组，一个人写文案，一个人搞技术，一个人做平面设计，一个人统筹安排和一个打杂的。 好的，什么时候或者是什么驱使你开发 Vue.js 的？ 我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。 我想，我可以只把我喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。 用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做 Vue.js，我记得那时还是 2013 年。后来我想『我花了这么多时间，不能只有我一个人用，我应该和别人分享，他们也会感觉到 Vue 的好处，他们也会喜欢上 Vue 的。』 2014 年 2 […]
View Details