Giter Club home page Giter Club logo

webpack-hasjs-plugin's Introduction

webpack-hasjs-plugin

This plugin performs has.js filtering on source modules based on a statically defined set of features. Feature conditionals who's values are defined in the static feature set are replaced with the value of the feature. The resulting dead code will then be pruned by the uglifier.

For example, the following code:

if (has('foo')) {
  console.log('foo');
} else {
  console.log('!foo');
}

with these options:

{
 features: {foo: true}
}

will yield the following output

if (true) {
  console.log('foo');
} else {
  console.log('!foo');
}

After the uglifier prunes dead code branches, only the call to console.log('foo') will remain. If a feature is not defined in the static feature set, then the code using that feature is unaffected unless the option coerceUndefinedToFalse is truthy, in which case the result will be as if the feature had been defined with a value of false. The values of the statically defined features may be number, boolean, or string. Any other types are ignored.

Install

npm i -D webpack-hasjs-plugin

Usage

// webpack.config.js
var HasJsPlugin = require('webpack-hasjs-plugin');

module.exports = {
  // ... snip ...
  plugins: [
    new HasJsPlugin({
			features: {
				foo: true,
				bar: false
			}
		})
  ],
  // ... snip ...
}

Options

features

Properties map of feature name/value pairs.

coerceUndefinedToFalse

If true, then any calls to the has function which specify a feature not declared in features will be treated as if the feature had been defined with a value of false.

Limitations

Due to limitations in the webpack parser, this plugin does not transform the source when the has() function call is a member of a comparison operator involving greater-than or less-than (e.g. if (has('ie') >= 10)), or, before webpack 5, if it used in an assignment (e.g. var foo = has('foo') && getFoo();). It does work, however, if the result of the ternary operator (e.g. var foo=has('foo')?getFoo():undefined;) is used in the assignment.

Fortunately, these problematic usage patterns are not common, and if they are encountered, the code is simply left alone, so they are not harmful.

webpack-hasjs-plugin's People

Contributors

chuckdumont avatar

Watchers

 avatar  avatar

webpack-hasjs-plugin's Issues

TypeError: Assignment to constant variable.

If i turn on the "coerceUndefinedToFalse" option and a variable is undefined, the console throws the following error: TypeError: Assignment to constant variable..

The problem is that you define a constant in line 2, which you overwrite in line 36. If you use let instead of const everything is fine.

Perhaps you want to try eslint to prevent these kind of errors.

Thank you very much for this plugin, it makes a migration from requirejs so much easier. ๐Ÿ™

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.