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 [email protected]  這樣去更新我們的依賴，然後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）