projext-plugin-webpack-angularjs

v6.0.1

Published

2 years ago

Allows you to bundle an AngularJS project with projext using the webpack build engine.

Downloads

0High
0Medium
0Low

homer0

projext plugin for AngularJS on webpack

Allows you to bundle an AngularJS project with projext using the webpack build engine.

Introduction

projext allows you to configure a project without adding specific settings for a module bundler, then you can decide which build engine to use. This plugin is meant to be used when you are bundling an AngularJS application and you are using the webpack build engine.

It adds the angularjs-annotate plugin to the Babel configuration in order to support AngularJS annotations.

Now you can use the ngInject directive on your code to inject your dependencies

class MyService {
  constructor($http, $q) {
    'ngInject';

    this.$http = $http;
    this.$q = $q;
    ...
  }
  ...
}

Information

| - | - | |--------------|----------------------------------------------------------------------------------------| | Package | projext-plugin-webpack-angularjs | | Description | Allows you to bundle an AngularJS project with projext using the webpack build engine. | | Node Version | >= v10.13.0 |

Usage

You first need the build engine, so install projext-plugin-webpack.
Add a new setting to your target named framework and set its value to angularjs.
Done

Now, when your target gets builded, the plugin will check if the target is using webpack and if the framework is AngularJS, then it will add the required loader and configure the transpilation options.

Babel

The babel-plugin-angularjs-annotate package only works on function statements, that's why it needs to update the configuration of the @babel/preset-env in order to work.

Let's say you are only supporting the last version of major browsers, well, most of them already support arrow functions and by default they wouldn't be transpiled.

If for some reason you are overwriting the Babel configuration projext generates, you need to make sure the following transformations are included:

@babel/plugin-transform-arrow-functions
@babel/plugin-transform-classes
@babel/plugin-transform-parameters

External dependencies

When bundling your targets, the plugin will check if the target is for Node or if it is a browser library and automatically exclude the AngularJS package so it doesn't end up on your build.

Default HTML

If you didn't create an HTML file for your AngularJS app, projext will create one for you and this plugin will take care of updating the contents of that HTML so you can run your app right away.

Now, there are a few options you can change in order to customize the way the HTML is generated: You can create a frameworkOptions property on your target configuration and set the following values:

{
  frameworkOptions: {
    title: null,
    appName: null,
    strict: true,
    cloak: true,
    useBody: true,
    mainComponent: 'main',
  }
}

title: A custom title for the HTML file. By default, projext, uses the name of the target.
appName: A custom name of the ng-app attribute. By default, the plugin will convert te target name to lowerCamelCase and use that.
strict: Whether or not you want to use the ng-strict-di directive.
cloak: Whether or not you want to use the ng-cloak directive.
useBody: Whether to add the ng-app attribute and the directives on the <body /> or on a <div /> inside it.
mainComponent: The tag name of a component that should be inside the "app tag".

Development

Yarn/NPM Tasks

| Task | Description | |-------------------------|-------------------------------------| | yarn test | Run the project unit tests. | | yarn run lint | Lint the modified files. | | yarn run lint:full | Lint the project code. | | yarn run docs | Generate the project documentation. |

Testing

I use Jest with Jest-Ex to test the project. The configuration file is on ./.jestrc, the tests and mocks are on ./tests and the script that runs it is on ./utils/scripts/test.

Linting

I use ESlint to validate all our JS code. The configuration file for the project code is on ./.eslintrc and for the tests on ./tests/.eslintrc (which inherits from the one on the root), there's also an ./.eslintignore to ignore some files on the process, and the script that runs it is on ./utils/scripts/lint.

Documentation

I use ESDoc to generate HTML documentation for the project. The configuration file is on ./.esdocrc and the script that runs it is on ./utils/scripts/docs.