New guide4you builder

Simon Seyock edited this page Jul 16, 2018 · 4 revisions

Preparations:

  • lessConfig is now config.less (search & replace in less files)
  • .png, .jpeg, .jpg, .svg files are now loaded automatically into the images folder. Subdirectories in the output are now longer possible. (import 'file-loader?name=images/doc/[name].[ext]!../../images/doc/layerselector-en.png' becomes import '../../images/doc/layerselector-en.png')
  • .svg files are loaded with mustache-laoder automatically (no need to add in the import anymore)
  • inside webpack or mustache configs instead of key: {prod: val1, dev: val2} use key: developing ? val2 : val2 (see below)
  • Use g4u-grab on demand instead of g4u-link
  • Add "import/no-webpack-loader-syntax": "off" to rules in .eslintrc
  • Use packages eslint-config-standard, esdoc-standard-plugin and eslint instead of standard
  • Use guide4you-builder >= 3.2.4, guide4you >= 3.0.1, openlayers = github:KlausBenndorf/ol3#g4u3_v5.0.2

Webpack config files:

The guide4you-builder provides 7 different webpack configuration files which can be combined to create all needed config files.

You need a config that defines an entry path, an output path, an alias for config.less and a HtmlWebpackPlugin.

By convention an environment parameter DEVELOPMENT should be set to true if in development mode. This can be read in any webpack config file with const developing = process.env.DEVELOPMENT ? JSON.parse(process.env.DEVELOPMENT) : false

  • webpack.common.js is the base configuration needed for all guide4you builds. IMPORTANT: When this configuration is to be merged with the configuration which introduces the (mandatory) HtmlWebpackPlugin, it needs to be merged with: webpackMerge.smartStrategy({ plugins: 'prepend' })(builderCommonConfig, htmlWebpackPluginConfig)
  • webpack.dev.js this config file extends webpack.common.js to start a dev server instead of file output.
  • webpack.build.js this config file extends webpack.common.js to create file output.
  • webpack.debug.js this config file extends webpack.build.js to create debug output.
  • webpack.prod.js this config file extends webpack.build.js to create output meant for production use.
  • webpack.dist.js this config file extends webpack.build.js to create output meant for distribution in npm packages.
  • webpack.test.js is a special config used for tests.

example:
local common config: const commonConfig = webpackMerge.smartStrategy({ plugins: 'prepend' })(require('guide4you-builder/webpack.common'), { entry: '..', output: '..', etc: '..'})
dev version: webpackMerge.smart(commonConfig, require('guide4you-builder/webpack.dev'))
prod version: webpackMerge.smart(commonConfig, require('guide4you-builder/webpack.build'), require('guide4you-builder/webpack.prod'))

Running the build script:

To run this configs it is recommended to create scripts in the package.json like this:
"prod:myconfig": "rimraf build/myconfig/* && g4u-build -c conf/myconfig/webpack.prod.js" or this:
"dev:myconfig": "cross-env-shell DEVELOPMENT=true g4u-build -c conf/myconfig/webpack.dev.js"

rimraf is a module that does a rm -rf and cross-env-shell starts a subshell that sets an evireonment variable. Both are for cross-platform compatibility and are included with guide4you-builder.

See also:

A commit that moves a module to the new guide4you + guide4you-builder:
https://github.com/KlausBenndorf/guide4you-module-search/pull/112/commits/b700a82327741cdc76f664a05e52d3a9850d3ad8

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.