npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@swissquote/crafty-preset-babel

v1.27.0

Published

<table> <tr><th>Compatible Runners</th><td>

Downloads

375

Readme

[TOC]

Description

Babel is the leading tool to compile EcmaScript 2015+ to EcmaScript 5, combined with ESLint to lint your code, you get the best preset to get started.

Features

@swissquote/crafty-preset-babel is able to configure Babel with Webpack. This preset also supports Gulp but in this case it concatenates and minifies the files, it doesn't resolve imports.

Our Babel preset

Read more

Linting

In @swissquote/crafty-preset-babel JavaScript is linted with ESLint, a powerful linter that supports plugins, our configuration follows the Swissquote JavaScript Guideline through our @swissquote/crafty-preset-eslint preset.

Read more

Installation

npm install @swissquote/crafty-preset-babel --save
module.exports = {
  presets: [
    "@swissquote/crafty-preset-babel",
    "@swissquote/crafty-runner-webpack", // optional
    "@swissquote/crafty-runner-gulp" // optional
  ],
  js: {
    app: {
      runner: "webpack", // Webpack or Gulp (optional if you have a single runner defined)
      source: "js/app.js"
    }
  }
};

Usage

With Webpack

Both runners have the same features in regards to Babel support. They will resolve your modules recursively and bundle them in one file or more if you do some code-splitting.

JavaScript External assets

By default, all bundlers include all external dependencies in the final bundle, this works fine for applications, but if you wish to build a multi-tenant application or a library, you don't wish to include all dependencies, because you'll end up with the same dependency duplicated.

The externals option allows you to define a list of libraries that are provided and should not be embedded in the build, here is an example :

module.exports = {
    ...
    // patterns are strings or globs
    externals: ["react", "react-dom", "squp", "squp/**"],
    ...
    js: {
        app: {
            // You can provide more items here, they will be merged with the main list for this bundle
            externals: ["my-plugin", "my-plugin/**"]
            ...
        }
    }
    ...
}

In this example react, react-dom and all modules starting with squp/ will be treated as external

With Gulp

Gulp will not bundle your files like Webpack does, instead it will generate one output file per input file. This is useful if you are creating a library as it's the role of the final application to tree-shake what it doesn't need from your library.

Tree-shaking is powerful but is sub-optimal on big files as some code patterns are recognized as side-effects and thus aren't removed from your bundle even if they aren't used.

Usage with Jest

If you include both crafty-preset-babel and crafty-preset-jest. When running your tests with crafty test this preset will be use to convert all .js and .jsx files (source and test files)

Configuration

Bundle options

| Option | Type | Optional ? | Runner | Description | | -------- | ------- | ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------- | | concat | Boolean | Yes | Gulp | This will merge all files together, outputting a single file. (This doesn't resolve imports, use Webpack for this) |

Adding Babel plugins and presets

You can add, replace or remove plugins and add options to our default Babel configuration. To see which plugins are already included, you can go to the Swissquote Preset for Babel page.

module.exports = {
  /**
   * Represents the extension point for Babel configuration
   * @param {Crafty} crafty - The instance of Crafty.
   * @param {Object} bundle - The bundle that is being prepared for build (name, input, source, destination)
   * @param {Object} babelConfig - The current Babel configuration
   */
  babel(crafty, bundle, babelConfig) {
    babelConfig.plugins.push(
      require.resolve("@babel/plugin-transform-property-literals")
    );
  }
};

After you did npm install --save-dev babel-plugin-transform-es5-property-mutators before, Babel will now use this plugin as well in each run.

This method is called once per bundle, so you can customize each bundle's configuration differently.