clappr-bandwidth-analyzerを最新版Clapprに対応させる①

clappr-bandwidth-analyzerはBandwidth、Average Bandwidthをリアルタイムにビジュアル表示してくれるプラグイン。
2017/10/22時点での更新日は１年以上前で、webpackを使用していないので最新のclapprでは使用することができない。
これを最新版clapprに対応させる。
clappr-level-selector-pluginを参考にwebpackに対応させればよい。
node 6.0.0で以下を実施していく。

git clone https://github.com/stojnovsky/clappr-bandwidth-analyzer
cd clappr-bandwidth-analyzer

package.json修正

“scripts”をwebpackを使うように修正

  "scripts": {
    "release": "node_modules/.bin/webpack --progress -d --optimize-minimize --optimize-dedupe --output-filename clappr-bandwidth-analyzer.min.js",
    "build": "node_modules/.bin/webpack --progress",
    "watch": "node_modules/.bin/webpack --progress --watch",
    "test": "karma start --single-run --browsers Chrome",
    "start": "node_modules/.bin/webpack-dev-server --content-base public/ --output-public-path /latest --hot",
    "lock": "rm -rf npm-shrinkwrap.json node_modules && npm install --silent && npm shrinkwrap"
  },

“dependencies”を、clappr最新版にして、clappr-zeptoを使用するようにする。

  "dependencies": {
    "clappr": "latest",
    "template": "^0.17.4",
    "clappr-zepto": "latest"
  },

“devDependencies”に以下を追加

    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.18.0",
    "html-loader": "^0.3.0",
    "mocha": "^2.3.2",
    "mocha-loader": "^0.7.1",
    "node-sass": "^3.3.3",
    "sass-loader": "^2.0.1",
    "style-loader": "^0.12.4",
    "webpack": "^1.12.2"

これを全部合わせるとpackage.jsonは

{
  "name": "clappr-bandwidth-analyzer",
  "version": "0.0.1",
  "dependencies": {
    "clappr": "latest",
    "template": "^0.17.4",
    "clappr-zepto": "latest"
  },
  "scripts": {
    "release": "node_modules/.bin/webpack --progress -d --optimize-minimize --optimize-dedupe --output-filename clappr-bandwidth-analyzer.min.js",
    "build": "node_modules/.bin/webpack --progress",
    "watch": "node_modules/.bin/webpack --progress --watch",
    "test": "karma start --single-run --browsers Chrome",
    "start": "node_modules/.bin/webpack-dev-server --content-base public/ --output-public-path /latest --hot",
    "lock": "rm -rf npm-shrinkwrap.json node_modules && npm install --silent && npm shrinkwrap"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:mediahub-bg/clappr-bandwidth-analyzer.git"
  },
  "author": "Stojnovsky",
  "devDependencies": {
    "browserify": "^6.2.0",
    "babelify": "5.0.3",
    "gulp": "^3.8.6",
    "gulp-minify-css": "^0.3.6",
    "lodash.template": "3.5.1",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^0.7.2",
    "vinyl-source-stream": "^1.0.0",
    "yargs": "latest",
    "glob": "^4.0.4",
    "mkdirp": "^0.5.0",
    "express": "^4.6.1",
    "gulp-util": "latest",
    "gulp-uglify": "^1.0.1",
    "gulp-livereload": "^2.1.0",
    "gulp-streamify": "0.0.5",
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.18.0",
    "html-loader": "^0.3.0",
    "mocha": "^2.3.2",
    "mocha-loader": "^0.7.1",
    "node-sass": "^3.3.3",
    "sass-loader": "^2.0.1",
    "style-loader": "^0.12.4",
    "webpack": "^1.12.2"
  }
}

となる。
最後に

npm install

を実施する。
長いので『clappr-bandwidth-analyzerを最新版Clapprに対応させる②』に続く。