<!DOCTYPE HTML>
< html lang = "" >
< head >
< meta charset = "UTF-8" >
< meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" >
< title > Creating presets · Neutrino< / title >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
< meta name = "description" content = "" >
< meta name = "generator" content = "GitBook 3.2.2" >
< link rel = "stylesheet" href = "gitbook/style.css" >
< link rel = "stylesheet" href = "gitbook/gitbook-plugin-prism/prism.css" >
< link rel = "stylesheet" href = "gitbook/gitbook-plugin-search/search.css" >
< link rel = "stylesheet" href = "gitbook/gitbook-plugin-fontsettings/website.css" >
< meta name = "HandheldFriendly" content = "true" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1, user-scalable=no" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" >
< link rel = "apple-touch-icon-precomposed" sizes = "152x152" href = "gitbook/images/apple-touch-icon-precomposed-152.png" >
< link rel = "shortcut icon" href = "gitbook/images/favicon.ico" type = "image/x-icon" >
< link rel = "next" href = "api/" / >
< link rel = "prev" href = "customization/advanced.html" / >
< / head >
< body >
< div class = "book" >
< div class = "book-summary" >
< div id = "book-search-input" role = "search" >
< input type = "text" placeholder = "Type to search" / >
< / div >
< nav role = "navigation" >
< ul class = "summary" >
< li class = "chapter " data-level = "1.1" data-path = "./" >
< a href = "./" >
Introduction
< / a >
< / li >
< li class = "chapter " data-level = "1.2" data-path = "installation.html" >
< a href = "installation.html" >
Installation
< / a >
< / li >
< li class = "chapter " data-level = "1.3" data-path = "usage.html" >
< a href = "usage.html" >
Usage
< / a >
< / li >
< li class = "chapter " data-level = "1.4" data-path = "project-layout.html" >
< a href = "project-layout.html" >
Project Layout
< / a >
< / li >
< li class = "chapter " data-level = "1.5" data-path = "presets/" >
< a href = "presets/" >
Presets
< / a >
< ul class = "articles" >
< li class = "chapter " data-level = "1.5.1" data-path = "presets/neutrino-preset-web/" >
< a href = "presets/neutrino-preset-web/" >
Web
< / a >
< / li >
< li class = "chapter " data-level = "1.5.2" data-path = "presets/neutrino-preset-react/" >
< a href = "presets/neutrino-preset-react/" >
React
< / a >
< / li >
< li class = "chapter " data-level = "1.5.3" data-path = "presets/neutrino-preset-node/" >
< a href = "presets/neutrino-preset-node/" >
Node.js
< / a >
< / li >
< li class = "chapter " data-level = "1.5.4" data-path = "presets/neutrino-preset-airbnb-base/" >
< a href = "presets/neutrino-preset-airbnb-base/" >
Airbnb
< / a >
< / li >
< li class = "chapter " data-level = "1.5.5" data-path = "presets/neutrino-preset-karma/" >
< a href = "presets/neutrino-preset-karma/" >
Karma
< / a >
< / li >
< li class = "chapter " data-level = "1.5.6" data-path = "presets/neutrino-preset-mocha/" >
< a href = "presets/neutrino-preset-mocha/" >
Mocha
< / a >
< / li >
< li class = "chapter " data-level = "1.5.7" data-path = "presets/neutrino-preset-jest/" >
< a href = "presets/neutrino-preset-jest/" >
Jest
< / a >
< / li >
< / ul >
< / li >
< li class = "chapter " data-level = "1.6" data-path = "customization/" >
< a href = "customization/" >
Customization
< / a >
< ul class = "articles" >
< li class = "chapter " data-level = "1.6.1" data-path = "customization/simple.html" >
< a href = "customization/simple.html" >
Simple
< / a >
< / li >
< li class = "chapter " data-level = "1.6.2" data-path = "customization/advanced.html" >
< a href = "customization/advanced.html" >
Advanced
< / a >
< / li >
< / ul >
< / li >
< li class = "chapter active" data-level = "1.7" data-path = "creating-presets.html" >
< a href = "creating-presets.html" >
Creating presets
< / a >
< / li >
< li class = "chapter " data-level = "1.8" data-path = "api/" >
< a href = "api/" >
API
< / a >
< / li >
< li class = "chapter " data-level = "1.9" data-path = "cli/" >
< a href = "cli/" >
CLI
< / a >
< / li >
< li class = "chapter " data-level = "1.10" data-path = "contributing/" >
< a href = "contributing/" >
Contributing
< / a >
< ul class = "articles" >
< li class = "chapter " data-level = "1.10.1" data-path = "contributing/development.html" >
< a href = "contributing/development.html" >
Development Process
< / a >
< / li >
< li class = "chapter " data-level = "1.10.2" data-path = "contributing/code-of-conduct.html" >
< a href = "contributing/code-of-conduct.html" >
Code of Conduct
< / a >
< / li >
< / ul >
< / li >
< li class = "divider" > < / li >
< li >
< a href = "https://www.gitbook.com" target = "blank" class = "gitbook-link" >
Published with GitBook
< / a >
< / li >
< / ul >
< / nav >
< / div >
< div class = "book-body" >
< div class = "body-inner" >
< div class = "book-header" role = "navigation" >
<!-- Title -->
< h1 >
< i class = "fa fa-circle-o-notch fa-spin" > < / i >
< a href = "." > Creating presets< / a >
< / h1 >
< / div >
< div class = "page-wrapper" tabindex = "-1" role = "main" >
< div class = "page-inner" >
< div id = "book-search-results" >
< div class = "search-noresults" >
< section class = "normal markdown-section" >
< h1 id = "creating-neutrino-presets" > Creating Neutrino Presets< / h1 >
< p > Creating Neutrino presets can solve a number of use cases in a manner which captures all the necessary configuration
and dependencies necessary to accomplish those use cases:< / p >
< ul >
< li > You find yourself needing to make the same modifications to all the projects you work on.< / li >
< li > Your team wants to adopt a managed set of linting rules across projects.< / li >
< li > You want to add functionality to the build pipeline that has not yet been encapsulated by an existing preset.< / li >
< li > You want to support building for more platforms than existing presets support.< / li >
< / ul >
< h2 id = "getting-started" > Getting Started< / h2 >
< p > Neutrino presets are Node.js modules or packages that export a function which accepts a Neutrino instance. You can use
this instance to modify the configuration, provide your own, expose custom options for your preset, listen for build
events, and execute functionality.< / p >
< p > At a bare minimum, let' s start with our package boilerplate for an empty Neutrino preset:< / p >
< pre class = "language-" > < code class = "lang-js" > module< span class = "token punctuation" > .< / span > exports < span class = "token operator" > =< / span > neutrino < span class = "token operator" > =< / span > < span class = "token operator" > > < / span > < span class = "token punctuation" > {< / span >
< span class = "token comment" spellcheck = "true" > // ...< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre >
< p > If you are using Babel or Neutrino to build your preset (so meta) with ES modules:< / p >
< pre class = "language-" > < code class = "lang-js" > < span class = "token keyword" > export< / span > < span class = "token keyword" > default< / span > neutrino < span class = "token operator" > =< / span > < span class = "token operator" > > < / span > < span class = "token punctuation" > {< / span >
< span class = "token comment" spellcheck = "true" > // ...< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre >
< h2 id = "configuring" > Configuring< / h2 >
< p > The Neutrino instance provided to your custom configurator has a < code > config< / code > property that is an instance of
< a href = "https://github.com/mozilla-rpweb/webpack-chain" target = "_blank" > webpack-chain< / a > . We won' t go in-depth of all the configuration
possibilities here, but encourage you to check out the documentation for webpack-chain for instruction on your
particular use case.< / p >
< p > This < code > neutrino.config< / code > is an accumulation of all configuration set up to this moment. Every Neutrino preset interacts
with and makes changes through this config, which is all available to your preset.< / p >
< h2 id = "events" > Events< / h2 >
< p > Neutrino exposes events for various stages of the build process your preset can hook into < strong > if necessary< / strong > .< / p >
< ul >
< li > < code > prestart< / code > : Triggered before creating a development bundle or launching a dev server.< / li >
< li > < code > start< / code > : Triggered after the development bundle has finished or the dev server has been stopped.< / li >
< li > < code > prebuild< / code > : Triggered before creating a production build.< / li >
< li > < code > build< / code > : Triggered after the production build has completed.< / li >
< li > < code > pretest< / code > : Triggered before invoking any test runners.< / li >
< li > < code > test< / code > : Triggered when test runners can start, or after they have all completed.< / li >
< / ul >
< p > < em > Example: Log to the console when a build finishes.< / em > < / p >
< pre class = "language-" > < code class = "lang-js" > module< span class = "token punctuation" > .< / span > exports < span class = "token operator" > =< / span > neutrino < span class = "token operator" > =< / span > < span class = "token operator" > > < / span > < span class = "token punctuation" > {< / span >
neutrino< span class = "token punctuation" > .< / span > < span class = "token function" > on< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ' build' < / span > < span class = "token punctuation" > ,< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > =< / span > < span class = "token operator" > > < / span > console< span class = "token punctuation" > .< / span > < span class = "token function" > log< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ' whew!' < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre >
< h2 id = "including-and-merging-other-presets" > Including and merging other presets< / h2 >
< p > If your preset depends on other Neutrino presets, or you are creating a preset that is a combination of multiple
presets, you can install them as dependencies and simply call them from your preset, providing them with your Neutrino
instance. When users install your preset, they will bring along your dependencies defined with your package without
needing also to include your extended presets in their own commands.< / p >
< p > < em > Example: Define a Neutrino preset which combines Node.js and Mocha presets.< / em > < / p >
< pre class = "language-" > < code class = "lang-js" > < span class = "token keyword" > const< / span > node < span class = "token operator" > =< / span > < span class = "token function" > require< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ' neutrino-preset-node' < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token keyword" > const< / span > mocha < span class = "token operator" > =< / span > < span class = "token function" > require< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ' neutrino-preset-mocha' < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
module< span class = "token punctuation" > .< / span > exports < span class = "token operator" > =< / span > neutrino < span class = "token operator" > =< / span > < span class = "token operator" > > < / span > < span class = "token punctuation" > {< / span >
< span class = "token function" > node< / span > < span class = "token punctuation" > (< / span > neutrino< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token function" > mocha< / span > < span class = "token punctuation" > (< / span > neutrino< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" spellcheck = "true" > // neutrino.config now contains the accumulation of configuration from< / span >
< span class = "token comment" spellcheck = "true" > // the Node.js and Mocha presets< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre >
< h2 id = "sample-preset-javascript-standard-style" > Sample Preset: JavaScript Standard Style< / h2 >
< p > Let' s create a preset from scratch which allows users to augment their project with
< a href = "http://standardjs.com/" target = "_blank" > JavaScript Standard Style< / a > . For this sample preset we are using
< a href = "https://yarnpkg.com" target = "_blank" > Yarn< / a > for managing dependencies, but you may use the npm client if you desire.< / p >
< pre class = "language-" > < code class = "lang-bash" > < span class = "token comment" spellcheck = "true" > # Create a new directory for your project and change into it:< / span >
< span class = "token function" > mkdir< / span > neutrino-preset-standard-style < span class = "token operator" > & & < / span > < span class = "token function" > cd< / span > neutrino-preset-standard-style
< span class = "token comment" spellcheck = "true" > # Initialize your project with a package.json:< / span >
yarn init --yes
< span class = "token comment" spellcheck = "true" > # Install the dependencies needed by our preset< / span >
yarn add standard-loader standard
< span class = "token comment" spellcheck = "true" > # Create the main file to the preset, e.g. index.js< / span >
< span class = "token function" > touch< / span > index.js
< / code > < / pre >
< p > Let' s edit this < code > index.js< / code > file to add our preset:< / p >
< pre class = "language-" > < code class = "lang-js" > < span class = "token keyword" > const< / span > path < span class = "token operator" > =< / span > < span class = "token function" > require< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ' path' < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
module< span class = "token punctuation" > .< / span > exports < span class = "token operator" > =< / span > neutrino < span class = "token operator" > =< / span > < span class = "token operator" > > < / span > < span class = "token punctuation" > {< / span >
neutrino< span class = "token punctuation" > .< / span > config
< span class = "token punctuation" > .< / span > < span class = "token function" > rule< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ' lint' < / span > < span class = "token punctuation" > )< / span >
< span class = "token punctuation" > .< / span > < span class = "token function" > pre< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span >
< span class = "token punctuation" > .< / span > < span class = "token function" > test< / span > < span class = "token punctuation" > (< / span > < span class = "token regex" > /\.jsx?$/< / span > < span class = "token punctuation" > )< / span >
< span class = "token punctuation" > .< / span > < span class = "token function" > include< / span > < span class = "token punctuation" > (< / span > path< span class = "token punctuation" > .< / span > < span class = "token function" > join< / span > < span class = "token punctuation" > (< / span > process< span class = "token punctuation" > .< / span > < span class = "token function" > cwd< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ,< / span > < span class = "token string" > ' src' < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > )< / span >
< span class = "token punctuation" > .< / span > < span class = "token function" > loader< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ' standard' < / span > < span class = "token punctuation" > ,< / span > require< span class = "token punctuation" > .< / span > < span class = "token function" > resolve< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ' standard-loader' < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ,< / span > < span class = "token punctuation" > {< / span >
snazzy< span class = "token punctuation" > :< / span > < span class = "token boolean" > false< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre >
< h2 id = "custom-data" > Custom Data< / h2 >
< p > If you want to expose custom options for your preset that are not appropriate to be stored in the Neutrino config,
there is a < code > neutrino.custom< / code > object namespace you can attach to. This way you can document to others how they can
go about affecting how your preset works.< / p >
< p > < em > Example:< / em > < / p >
< pre class = "language-" > < code class = "lang-js" > module< span class = "token punctuation" > .< / span > exports < span class = "token operator" > =< / span > neutrino < span class = "token operator" > =< / span > < span class = "token operator" > > < / span > < span class = "token punctuation" > {< / span >
neutrino< span class = "token punctuation" > .< / span > custom< span class = "token punctuation" > .< / span > standardStyle < span class = "token operator" > =< / span > < span class = "token punctuation" > {< / span >
quiet< span class = "token punctuation" > :< / span > < span class = "token boolean" > false< / span > < span class = "token punctuation" > ,< / span >
logLevel< span class = "token punctuation" > :< / span > < span class = "token string" > ' warn' < / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" spellcheck = "true" > // ...< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre >
< h2 id = "working-with-paths" > Working with paths< / h2 >
< p > When working with paths, remember that your preset will be running in the context of a project. You should take care
to define application paths by referencing the current working directory with < code > process.cwd()< / code > . For example, if you
wanted to work with the project' s " src" directory, you would merge the path via < code > path.join(process.cwd(), ' src' )< / code > < / p >
< h2 id = "loader-and-babel-modules" > Loader and Babel modules< / h2 >
< p > Because of package conflicts or unknown layout of a project' s < code > node_modules< / code > directory, it is usually safer to
define loaders, Babel plugins, and Babel presets to Webpack absolutely than by name. In our sample preset above, while
we could have passed the loader as just < code > ' standard-loader' < / code > , it is safer to resolve its location relative to our preset
than having Webpack et al to attempt to load it later from a different, potentially incorrect location. Instead we
passed < code > require.resolve(' standard-loader' )< / code > .< / p >
< p > As a rule of thumb, if your preset is the one using < code > require< / code > , you are safe to require by name. If you are passing the
name of the module off to be required by Webpack or Babel, instead pass the path to the module via < code > require.resolve< / code > .< / p >
< h2 id = "publishing" > Publishing< / h2 >
< p > When your preset is ready to be used by others, feel free to publish and distribute! By putting your preset on npm,
GitHub, or another location, you can share the hard work put into abstracting away configuration and save everyone
in the community time and effort. As long as Neutrino can require your preset, it puts no restrictions on where
you want to host it.< / p >
< / section >
< / div >
< div class = "search-results" >
< div class = "has-results" >
< h1 class = "search-results-title" > < span class = 'search-results-count' > < / span > results matching "< span class = 'search-query' > < / span > "< / h1 >
< ul class = "search-results-list" > < / ul >
< / div >
< div class = "no-results" >
< h1 class = "search-results-title" > No results matching "< span class = 'search-query' > < / span > "< / h1 >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< a href = "customization/advanced.html" class = "navigation navigation-prev " aria-label = "Previous page: Advanced" >
< i class = "fa fa-angle-left" > < / i >
< / a >
< a href = "api/" class = "navigation navigation-next " aria-label = "Next page: API" >
< i class = "fa fa-angle-right" > < / i >
< / a >
< / div >
< script >
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Creating presets","level":"1.7","depth":1,"next":{"title":"API","level":"1.8","depth":1,"path":"api/README.md","ref":"api/README.md","articles":[]},"previous":{"title":"Advanced","level":"1.6.2","depth":2,"path":"customization/advanced.md","ref":"customization/advanced.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","prism","-highlight","github","anchorjs"],"root":"./docs","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"prism":{},"github":{"url":"https://github.com/mozilla-neutrino/neutrino-dev/"},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit page","base":"https://github.com/mozilla-neutrino/neutrino-dev/tree/master/docs"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"anchorjs":{}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Neutrino","gitbook":"*"},"file":{"path":"creating-presets.md","mtime":"2017-02-21T13:04:40.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-02-21T19:05:42.839Z"},"basePath":".","book":{"language":""}});
});
< / script >
< / div >
< script src = "gitbook/gitbook.js" > < / script >
< script src = "gitbook/theme.js" > < / script >
< script src = "gitbook/gitbook-plugin-edit-link/plugin.js" > < / script >
< script src = "gitbook/gitbook-plugin-github/plugin.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.1.1/anchor.min.js" > < / script >
< script src = "gitbook/gitbook-plugin-anchorjs/anchor-style.js" > < / script >
< script src = "gitbook/gitbook-plugin-search/search-engine.js" > < / script >
< script src = "gitbook/gitbook-plugin-search/search.js" > < / script >
< script src = "gitbook/gitbook-plugin-lunr/lunr.min.js" > < / script >
< script src = "gitbook/gitbook-plugin-lunr/search-lunr.js" > < / script >
< script src = "gitbook/gitbook-plugin-sharing/buttons.js" > < / script >
< script src = "gitbook/gitbook-plugin-fontsettings/fontsettings.js" > < / script >
< / body >
< / html >
