package-lock.json的作用、karma配置及使用

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. 你要使用哪个测试框架？
   (1) Jasmine（BDD，提供了基于网页的输出结果）
   (2) Mocha
      ①既可以测试简单的JavaScript函数，又可以测试异步代码，因为异步是JavaScript的特性之一
      ②可以自动运行所有测试，也可以只运行特定的测试
      ③可以支持before、after、beforeEach和afterEach来编写初始化代码
   (3) Qunit（Jquery）
   (4) Nodeunit（为node.js和浏览器提供简单的异步单元测试。）
   (5) Nunit（VS上的集成）
2. 是否要使用require.js？ No（AMD规范的模块化工具）
3. 是否要自动捕获任何浏览器？
   (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
4. 源文件和测试文件的位置是什么？ './tests/unit/*.spec.js'
5. 是否应排除以前模式包含的任何文件？
6. 你想让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）