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

Use the following dev-dependencies and scripts in your project.

{
  "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. Use options taken from the same environment variables used in your package.json scripts.

/* 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();

Some explanation:

  • 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 (see Shimming below).

  • 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.

  • Options by process.env

    More than one configuration may be passed to angularity(). This means process.env may be passed in entirity (See environment variables below).

  • The include() and otherwise() methods

    The include() statement runs either of the defined app|test|release compilations where the MODE environment variable.

    Omission of MODE implies the otherwise() behavior, where both app and test compilations will run. You should customise this default behavior to your taste.

    The test mode is only meaningful if you have *.spec.js files in your project.

.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