Skip to content

project setup

Jump to bottom
benholloway edited this page Mar 14, 2016 · 7 revisions

Please read in full. Failure to configure any one of the following may leave you with a broken project.

You may delete the redundant files:

  • angularity.json

Ensure you add or amend the following files:

  • For each app in your /app directory

  • index.html

  • In your project root

  • package.json

  • webpack.config.js

  • .babelrc

Details are given below.

index.html

The injection tags have changed slightly. Your file should look like this.

<html>
  <head>
    <!-- inject:css -->
    <!-- endinject -->
  </head>

  <body>
    <!-- inject:json -->
    <!-- endinject -->

    <!-- inject:js -->
    <!-- endinject -->
  </body>
</head>

The changes may be sumarised as:

  • Remove bower:css
  • Remove bower:js
  • Add inject:json for bundle manifest (must come before inject:js)

package.json

Usage is typically per npm scripts.

We suggest the following scripts for most projects.

{
  "scripts": {
    "build": "webpack -d --progress",
    "build-unminified": "cross-env UNMINIFIED=true webpack -d --progress",
    "watch": "webpack -d --watch",
    "watch-unminified": "cross-env UNMINIFIED=true webpack -d --watch",
    "release": "cross-env MODE=release webpack -d --progress"
  }
}

Based on installation instructions you should also have dependencies similar to the following.

{
  "devDependencies": {
    "webpack-angularity-solution": "^1.0.0",
    "babel-plugin-add-module-exports": "^0.1.1",
    "babel-preset-es2015": "^6.3.13"
  }
}

Some explanation:

  • BabelJS

    You may be able to omit the BabelJS dependencies if you have not been writing ES6 javascript.

  • cross-env

    Any setting passed to cross-env corresponds to environment variables. By convention they are UPPERCASE. These environment variables are private to the executable that follows so you don't need to worry about name conflicts across different projects.

webpack.config.js

Create a Webpack configuration file that delegates to the webpack-angularity-solution package.

The following is pro-forma and for many projects. Refer to configuration for an in depth discussion.

/* global process:true */

var angularity = require('webpack-angularity-solution');

const PORT    = 55555,
      GLOBALS = {
        $              : 'jquery',
        jQuery         : 'jquery',
        'window.jQuery': 'jquery'
      };

module.exports = angularity({globals: GLOBALS, port: PORT}, process.env)
  .include(process.env.MODE) // app|test|release
  .otherwise('app_test')	 // run app+test if MODE is unspecified
  .resolve();

You should consider some important customisations.

  • Option globals

    Note that there are no globals in applications bundled by Webpack. If your code relies on globals such as jQuery, you will have to configure the globals option as shown above.

    Add additional globals as required by your application.

    Better practice may be to solve the problem at its source using module shimming.

  • Option port

    By default --watch in the app mode will launch a BrowserSync server on port 55555. You should override this port to some unique value so that your projects to no conflict with each other.

.babelrc

If you are compiling future Javascript down to to current javascript you will need to configure BabelJS with the features you desire.

Angularity has traditionally supported ES6 (now es2015) so we will use that as an example. Also note that the Babel default export behaviour has changed so we will be use babel-plugin-add-module-exports so that require() statements yeild the default export.

Both of these aspects were installed above as devDependencies so we can now create a babel-js configuration file that uses them.

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "add-module-exports"
  ]
}
Clone this wiki locally