package-lock.json的作用
npm 5.0版本之后,npm install后都会有一个package-lock.json,作用是什么?
1、锁定安装时的包的版本号,需要上传到git,保证大家的依赖包一致。
2、package-lock.json 是在 `npm install`时候生成一份文件,用来记录当前状态下实际安装的各个npm package的具体来源和版本号。
3、它有什么用呢?因为npm是一个用于管理package之间依赖关系的管理器,它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选择以如下方式来标明自己所需要库包的版本;例如:
"dependencies": {
"@types/node": "^8.0.33",
},
这里面的 向上标号^是定义了向后(新)兼容依赖,指如果 types/node的版本是超过8.0.33,并在大版本号(8)上相同,就允许下载最新版本的 types/node库包,例如实际上可能运行npm install时候下载的具体版本是8.0.35。
大多数情况这种向新兼容依赖下载最新库包的时候都没有问题,可是因为npm是开源世界,各库包的版本语义可能并不相同,有的库包开发者并不遵守严格这一原则:相同大版本号的同一个库包,其接口符合兼容要求。这时候用户就很头疼了:在完全相同的一个nodejs的代码库,在不同时间或者不同npm下载源之下,下到的各依赖库包版本可能有所不同,因此其依赖库包行为特征也不同有时候甚至完全不兼容。
解决:
因此npm最新的版本就开始提供自动生成package-lock.json功能,为的是让开发者知道只要你保存了源文件,到一个新的机器上、或者新的下载源,只要按照这个package-lock.json所标示的具体版本下载依赖库包,就能确保所有库包与你上次安装的完全一样。
4、package.json缺点
原来package.json文件只能锁定大版本,也就是版本号的第一位,并不能锁定后面的小版本,你每次npm install都是拉取的该大版本下的最新的版本,为了稳定性考虑我们几乎是不敢随意升级依赖包的,这将导致多出来很多工作量,测试/适配等,所以package-lock.json文件出来了,当你每次安装一个依赖的时候就锁定在你安装的这个版本。
5、安装依赖出问题的解决方式不同:
那如果我们安装时的包有bug,后面需要更新怎么办?
以前:在以前可能就是直接改package.json里面的版本,然后再npm install了。
现在:但是5版本后就不支持这样做了,因为版本已经锁定在package-lock.json里了,所以我们只能npm install xxx@x.x.x 这样去更新我们的依赖,然后package-lock.json也能随之更新。
例如:
假如我已经安装了jquery 2.1.4这个版本,从git更新了package.json和package-lock.json,我npm install能覆盖掉node_modules里面的依赖吗?
其实我也有这个疑问,所以做了测试,在直接更新package.json和package-loc.json这两个文件后,npm install是可以直接覆盖掉原先的版本的,所以在协作开发时,这两个文件如果有更新,你的开发环境应该npm install一下才对。
karma配置及使用
一、定义
Karma不是测试框架,也不是断言库。
Karma是一个测试工具,一个允许在多个真实浏览器中执行JavaScript代码的工具,为开发人员提供高效的测试环境。
代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来;另外,浏览器有兼容问题,karma提供了手段让你的代码自动在多个浏览器(chrome,firefox,ie等)环境下运行。如果你的代码只会运行在node端,那么你不需要用karma。
什么时候应该使用Karma?
- 想在真实浏览器中测试代码
- 想在多个浏览器(桌面,移动设备,平板电脑等)中测试代码
- 希望在开发期间在本地执行测试
- 希望在持续集成服务器上执行测试
- 希望在每次保存时执行测试
- 喜欢使用终端搞事
- 不希望你的代码测试出来变得糟透了
- 希望使用Istanbul自动生成覆盖率报告
- 希望将RequireJS用于源文件
二、配置
首先安装一个全局的karma用来初始化karma的配置
image.png
- 你要使用哪个测试框架?
(1) Jasmine(BDD,提供了基于网页的输出结果)
(2) Mocha
①既可以测试简单的JavaScript函数,又可以测试异步代码,因为异步是JavaScript的特性之一
②可以自动运行所有测试,也可以只运行特定的测试
③可以支持before、after、beforeEach和afterEach来编写初始化代码
(3) Qunit(Jquery)
(4) Nodeunit(为node.js和浏览器提供简单的异步单元测试。)
(5) Nunit(VS上的集成) - 是否要使用require.js? No(AMD规范的模块化工具)
- 是否要自动捕获任何浏览器?
(1) Chrome
(2) ChromeHeadless(在headless模式下运行谷歌浏览器-无头浏览器模式,用于自动化测试和不需要可视化用户界面的服务器,命令行)
(3) ChromeCanary(可以同时安装/运行两个Chrome版本,以不同的路径安装,采用专有的图标、快捷键等,单独获得升级,并且与现有的Chrome互不干扰地运行)
(4) Firefox
(5) Safari
(6) PhantomJS(基于webkit的JavaScript API,它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaScript代码)
(7) Opera
(8) IE - 源文件和测试文件的位置是什么? './tests/unit/*.spec.js'
- 是否应排除以前模式包含的任何文件?
- 你想让Karma监视所有的文件并运行变更测试吗?
Karma.conf.js配置(命名:是conf,不是config)
// Karma configuration
// Generated on Thu Apr 04 2019 09:59:06 GMT+0800 (中国标准时间)
const webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = function(config) {
config.set({
// 基础路径,用在files,exclude属性上
basePath: '',
// 可用的框架: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha'],
// 需要加载到浏览器的文件列表
files: [
'./tests/unit/*.spec.js'
],
// 排除的文件列表
exclude: [
'node_modules'
],
// 在浏览器使用之前处理匹配的文件
// 可用的预处理: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'**/*.spec.js': ['webpack']
},
// 使用测试结果报告者
// 可能的值: "dots", "progress"
// 可用的报告者:https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// 服务端口号
port: 9876,
// webpack 配置
webpack: webpackConfig,
// 启用或禁用输出报告或者日志中的颜色
colors: true,
// 日志等级
// 可能的值: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// 启用或禁用自动检测文件变化进行测试
autoWatch: true,
// 测试启动的浏览器
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// 开启或禁用持续集成模式
// 设置为true, Karma将打开浏览器,执行测试并最后退出
singleRun: false,
// 并发级别(启动的浏览器数)
concurrency: Infinity
})
}
webpack.test.config.js
var path = require("path")
var webpack = require("webpack")
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
var webpackConfig = {
module: {
rules: [
// babel-loader
{
test: /\.js$/,
use: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
// vue loader
{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader'
},
}
}]
},
]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
]
}
module.exports = webpackConfig
Babel-loader js编译器,把浏览器不支持的js转译成浏览器支持的js
核心包
- babel-core:babel转译器本身,提供了babel的转译API,如babel.transform等,用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。
- babylon:js的词法解析器
- babel-traverse:用于对AST(抽象语法树,想了解的请自行查询编译原理)的遍历,主要给plugin用
- babel-generator:根据AST生成代码
以ES6代码转译为ES5代码
image.png
三、安装karma的依赖
npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha
image.png
四、使用
在package.json里面的scripts加上
"test:karma": "karma start"
然后运行
npm run test:karma
或者直接运行
karma start
image.png
image.png
不使用karma的情况下(同样是使用mocha)