Skip to content

How to update a module to version 2

Josef 'Jupp' Schugt edited this page Jul 20, 2017 · 18 revisions

in the beginning you need to decide if the package needs a distributable version. This might not be neccessary.

if you choose so, add folders in conf with the names build and dist. move the entry.js and webpack.js to the build folder and create new ones in the dist folder. Use maybe guide4you-module-urlapi as a template. Take care to update all paths.

rm -rf node_modules/ in the background

package.json:

add guide4you, jquery, openlayers and any guide4you modules as peerDependencies and devDependencies, remove them as dependencies

"devDependencies": {
	"guide4you": "2.0.*",
	"jquery": "3.2.1",
	"openlayers": "github:KlausBenndorf/ol3#g4u3_v4.1.0"
}

"peerDependencies": {
	"guide4you": "2.0.*",
	"jquery": "3.2.1",
	"openlayers": "github:KlausBenndorf/ol3#g4u3_v4.1.0"
}

move guide4you-proxy to devDependencies

update used versions in dependencies and devDependencies

add http-server to devDependencies

devDependencies should look something like this:

"devDependencies": {
	"concurrently": "^3.4.0",
	"copy-webpack-plugin": "^4.0.1",
	"esdoc": "0.5.2",
	"guide4you": "2.0.*",
	"guide4you-builder": "2.0.*",
	"guide4you-proxy": "github:KlausBenndorf/guide4you-proxy#v1.0.0",
	"html-webpack-include-assets-plugin": "0.0.5",
	"html-webpack-plugin": "2.28.0",
	"http-server": "^0.10.0",
	"jquery": "3.2.1",
	"mocha": "3.4.2",
	"openlayers": "github:KlausBenndorf/ol3#g4u3_v4.1.0",
	"phantomjs-prebuilt": "2.1.14",
	"selenium-webdriver": "3.4.0",
	"standard": "10.0.2",
	"wait-on": "2.0.2"
}

npm install in the background (after rm -rf completed)

update scripts to something like this (take care of proper paths):

with distributable version:

"scripts": {
	"dist": "g4u-build -m dist -c conf/dist",
	"linkRepos": "g4u-link guide4you",
	"unlinkRepos": "g4u-unlink guide4you",
	"build": "g4u-build -m prod -c",
	"dev": "g4u-build -m dev -c",
	"prepublishOnly": "npm test && git add dist/ && git commit --amend",
	"lint": "eslint src/ tests/",
	"buildTests": "concurrently \"g4u-buildTests\" \"npm run dist\"",
	"runTests": "wait-on -l http-get://localhost:8089 && mocha build/tests/*",
	"test": "npm run lint && npm run buildTests && concurrently --kill-others --success first \"http-server ./ -p 8089 -s\" \"npm run runTests\" && echo \"Tests completed successfully\"",
	"doc": "esdoc -c esdoc.json"
}

without distributable version:

"scripts": {
	"linkRepos": "g4u-link guide4you",
	"unlinkRepos": "g4u-unlink guide4you",
	"build": "g4u-build -m prod -c",
	"dev": "g4u-build -m dev -c",
	"prepublishOnly": "npm test", // <--
	"lint": "eslint src/ tests/",
	"buildTests": "concurrently \"g4u-buildTests\" \"npm run build conf/\"", // <--
	"runTests": "wait-on -l http-get://localhost:8089 && mocha build/tests/*",
	"test": "npm run lint && npm run buildTests && concurrently --kill-others --success first \"http-server ./ -p 8089 -s\" \"npm run runTests\" && echo \"Tests completed successfully\"",
	"doc": "esdoc -c esdoc.json"
}

webpack.js

the following requires are needed:

const mustacheEvalLoader = require('guide4you-builder/mustache-eval-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

the mustacheEvalLoader is now configured like this:

mustacheEvalLoader.setTemplateVars({
  pageTitle: '...',
  etc
})

the module.export's entry property now has a property named g4u - that's what used to be called lib/g4u.js

the alias for the the less configuration that used to be lessConfig.less is now called lessConfig

new plugins:

new CopyWebpackPlugin([
  { from: 'node_modules/jquery/dist/jquery.min.js', to: 'js/jquery.min.js' },
  { from: 'node_modules/openlayers/dist/ol.js', to: 'js/ol.js' }
]),
new HtmlWebpackIncludeAssetsPlugin({
  assets: [
    'js/jquery.min.js',
    'js/ol.js'
  ],
  append: false
})

if HtmlWebpackIncludeAssetsPlugin, HtmlWebpackPlugin or CopyWebpackPlugin are missing

install them with -D

entry.js

Replace

import { createG4UInternal } from 'guide4you/src/main'

by

import { createMapInternal } from 'guide4you/src/main'

instead of assigning a method createG4U to the window object:

export function createMap ...

and

export * from 'guide4you/src/exports'

.gitignore

remove everything related to the tests folder from the .gitignore.

tests

move contents of selenium/ and unit-tests/ to the parent folder. If you want to use unit-tests, just create *_spec.js files in the tests folder and don't use selenium but a unit test framework (maybe chai). These files will be run with mocha.

source files

  • make sure that all loaders have a -loader postfix.
  • the mustache-eval-loader and to-json-file-loader can be used without the guide4you-builder prefix but inside of less files don't forget to put a ~ in front of their name.
  • import paths relative to the base folder can be used like this: src/something.js.

html

use g4u.createMap instead of createG4U

npm run linkRepos

remove all local repositories from the linkRepos script with rights to create symlinks

test everything

npm run dev conf/ (or npm run dev conf/build)
npm test
npm dist (if configured)
npm run build conf (or npm run build conf/build)

git add -A && git commit -m 'update to version 2'

npm version major

npm publish

git push --follow-tags