Never Paint Mohawks

    This package has been deprecated

    Author message:

    Package renamed to @moxy/babel-preset


    3.2.0 • Public • Published


    NPM version Downloads Build Status Coverage Status Dependency status Dev Dependency status

    Babel preset to be used at MOXY.


    $ npm install babel-preset-moxy @babel/core --save-dev

    If you are using Jest for testing, you also need to install babel-jest:

    $ npm install babel-jest --save-dev


    Projects developed at MOXY often use new JavaScript language features that may not be supported in the targets they will run. This preset provides a shareable Babel config that:

    Do I need to transpile?

    There has been discussion in the community about libraries not being compiled, leaving all compilation efforts to top-level projects consuming them. This makes sense, since developers know what platforms their top-level project target and are able to compile their dependencies accordingly. Furthermore, library maintainers are constantly having to update their compilation options as new features are accepted into different stages of the specification, which creates significant and unnecessary overhead.

    Problems arise, however, in libraries which target both Node.js and browser, or if non-standard JavaScript is being used, such as proposals or JSX. In those situations, library authors are required to transpile their libraries code to offer CommonJS and ES module variants or to transform non-standard JavaScript to standard JavaScript.

    In conclusion:

    1. For libraries, you need to transpile if you want to publish both in CommonJS and ES or if there are non-standard JavaScript language features being used
    2. For top-level projects, you need to transpile both your code and your dependencies if the JavaScript language features being used are not supported by your targets


    1. Choose a preset-type

    There're two preset types available for you to use:

    • For libraries: use the lib type in case you are developing a library to be consumed by others
    • For end-projects: use the end-project type in case you developing a top-level project, such as an Web Application, a Node.js API or CLI

    2. Setup babel within your project

    The way Babel is configured depends on the the tooling you are using. Below, there are instructions for common scenarios:

    Standard project

    If you don't use a bundler within your project, this is the setup guide you should follow

    • Create .babelrc at the root of your project, replacing <preset-type> with the preset type you chose:

          "presets": ["babel-preset-moxy/<preset-type>"]

      ...or with options:

          "presets": [["babel-preset-moxy/<preset-type>", { "react": true }]]
    • Install @babel/cli as a dev dependency because we will need it for the build script:

      $ npm install @babel/cli --save-dev
    • Set up your package.json like this:

        "build:commonjs": "BABEL_ENV=commonjs babel src -d lib --delete-dir-on-start",
        "build:es": "BABEL_ENV=es babel src -d es --delete-dir-on-start",
        "build": "npm run build:commonjs && npm run build:es"

      Note that the build process above will produce both CommonJS and ES builds. If you just want to produce a single build, the package.json may be simplified. For example, to produce a single CommonJS build:

        "build": "BABEL_ENV=es babel src -d es"
    • Tweak your .gitignore file:

      Add lib/ and/or es/ folder to the gitignore file so that those output folders are never committed.

    • Create src/index.js and happy coding!

    Webpack based project

    Tweak your Webpack config JavaScript rule to include babel-loader and MOXY's preset. Here's an example for a website project using React:

        test: /\.js$/,
        use: [
                loader: require.resolve('babel-loader'),
                options: {
                    cacheDirectory: true,  // Improve performance
                    presets: [
                        [require.resolve('babel-preset-moxy/end-proect'), {
                            targets: ['browsers'],
                            react: true,
                            modules: false,

    It's important that you do not exclude the node_modules folder so that everything goes through the @babel/preset-env, ensuring that all the produced code was transpiled according to the targets.

    3. Tweak the options

    Below, you may find a list containing all options you may tweak:

    Name Description Type Default in lib in end-project
    react Adds support for React boolean false
    lodash Transform to cherry-pick Lodash modules boolean/Object true
    modules Transform ES6 module syntax to another module type string/boolean Based on process.env.BABEL_ENV, commonjs if unspecified
    dynamicImport Adds support for import() statements boolean true
    loose Enable "loose" transformations for any plugins that allow them boolean true
    targets The output targets, see bellow for a more detailed explanation Array/Object ['browsers', 'node']
    env The environment (development, production or test) string Based on process.env.NODE_ENV
    namedDefaultExport Use add-module-exports plugin to get around babel/babel#2212 boolean true if modules is commonjs

    lodash option

    Specify which modules will have the cherry-pick transformation applied.

    Note that lodash-es, lodash-compat and lodash/fp are always added for you, regardless of having this option defined or not.

    For instance, to have smaller bundles when using recompose:

        "presets": [
            ["babel-preset-moxy/<preset-type>", {
                "lodash": { "id": ["recompose"] }

    targets option

    The targets option has a very important role. By default, its value is ['browsers', 'node'] which means that the compiled code will work in both the Browser and in Node.js.

    When browsers is specified, the compiled code will work on browsers that are supported by Google's browser support policy. When node is specified, the compiled code will work on the last LTS or higher (currently v8.9).

    If your project has different requirements in terms of browser or node support, you may specify the targets yourself as an object.

    dynamicImport option

    Dynamic imports support are enabled by default but are dependent on the modules option. More specifically, the syntax-dynamic-import and dynamic-import-node when the modules option is set to false and commonjs respectively.

    For other modules types, such as amd, you must find and include a plugin yourself. Also, you may disable the dynamicImport option by setting it to false in case you want to disable the feature completely or if you want to choose another plugin.

    env option

    The env's default value respects process.env.NODE_ENV and falls back to production if none are set. When env is production, some plugins that perform code optimization will be enabled.

    The modules default value is commonjs unless process.env.BABEL_ENV is set to es.

    4. Be aware of the caveats

    No, seriously. Read the Caveats section as it contains crucial information and might require you to do a few more steps.



    In libraries

    Shipping polyfills in libraries is, in general, a bad practice because it increases the overall file size of your top-level project due to duplication.

    The transform-runtime plugin attempts to solve the polyfills and duplication by transforming Object.assign, Promise and other features to their core-js counter-parts. Though, this doesn't play well with preset-env because it inlines everything, including features that are already supported by our targets. Additionally, if different versions of the runtime are installed, duplication still happens.

    For this reason, you, as an author, should state in the README of your library that you expect the environment to be polyfilled with core-js, babel-polyfill, or similar.

    In top-level projects

    Simply include import 'babel-polyfill'; at the top of your entry file. That statement will be replaced with the necessary polyfills based on the targets you want to support.

    // in:
    import 'babel-polyfill';
    // out:
    import 'core-js/modules/es6.object.assign';
    import 'core-js/modules/es6.promise';
    // ...

    Dynamic imports

    The support for dynamic imports is enabled by default, please read more on the dynamicImport option.

    The caveat is that preset-env is unaware that using import() with Webpack relies on Promise internally. Environments which do not have builtin support for Promise, like Internet Explorer, will require both the promise and iterator polyfills be added manually. Having said that, tweak your top-level project's Webpack config like so:

        entry: [
            // Path to your entry file


    You must use a minifier that understands ES6+ syntax because the transpiled code might contain ES6+ code. As an example, UglifyJS v2 only understands ES5 syntax but UglifyJS v3 does support ES6+.


    $ npm test
    $ npm test -- --watch # during development 


    MIT License


    npm i babel-preset-moxy

    DownloadsWeekly Downloads






    Unpacked Size

    31.2 kB

    Total Files


    Last publish


    • tiagodinis
    • moxyhq
    • filipediasf
    • satazor
    • marcooliveira
    • acostalima
    • andregoncalvesdev