neutrino-preset-component
v0.0.1
Published
Neutrino preset for building library, components and such
Downloads
5
Maintainers
Readme
Neutrino Library Preset
Neutrino preset for building library, components and such
Features
Similar to the neutrino-preset-web not for the apps though, but for the libraries, components and such.
Nope, not really for the react components... yet :)
- Zero upfront configuration necessary to start developing and building a library
- Modern Babel compilation supporting ES modules, last 2 major browser versions and dynamic imports
- Webpack loaders for importing CSS, images, icons, fonts
- Tree-shaking to create smaller bundles
- Production-optimized bundles with Babili minification
Install
$ npm install --save-dev neutrino neutrino-preset-component
Development
For the development it's recommended to use neutrino-preset-web
. See example of using neutrino-preset-web
for development and neutrino-preset-component
for build in in this project. See package.json
and .neutrinorc
files.
Project Layout
neutrino-preset-component
follows the standard project layout specified by Neutrino. This means that by default all project source code should live in a directory named src
in the root of the project. This includes JavaScript files, CSS stylesheets, images, and any other assets that would be available
to your compiled project.
Edit your project's package.json to add commands for starting and building the application:
{
"scripts": {
"build": "neutrino build --use neutrino-preset-component"
}
}
If you are using .neutrinorc.js
, add this preset to your use array instead of --use
flags:
module.exports = {
use: ['neutrino-preset-component']
};
Building
neutrino-preset-preset
builds static assets to the build
directory by default when running neutrino build
. Using the quick start example above as a reference:
$ npm run build
✔ Building project completed
Hash: 301112cfe9a1006a2aaa
Version: webpack 2.7.0
Time: 725ms
Asset Size Chunks Chunk Names
index.js 26.3 kB 0 [emitted] index
Static assets
If you wish to copy files to the build directory that are not imported from application code, you can place them in a directory within src
called static
. All files in this directory will be copied from src/static
to build/static
.
Preset options
You can provide custom options and have them merged with this preset's default options to easily affect how this preset builds. You can modify Web preset settings from .neutrinorc.js
by overriding with an options object. Use an array pair instead of a string to supply these options in .neutrinorc.js
.
The following shows how you can pass an options object to the Web preset and override its options, showing the defaults:
module.exports = {
use: [
['neutrino-preset-component', {
// Add additional Babel plugins, presets, or env options
babel: {
// Override options for babel-preset-env
presets: [
['babel-preset-env', {
// Passing in targets to babel-preset-env will replace them
// instead of merging them
targets: {
browsers: [
'last 1 Chrome versions',
'last 1 Firefox versions'
]
}
}]
]
}
}]
]
};
Customizing
To override the build configuration, start with the documentation on customization. neutrino-preset-component
creates some conventions to make overriding the configuration easier once you are ready to make changes
Rules
The following is a list of rules and their identifiers which can be overridden:
| Name | Description | Environments |
| ---- | ----------- | ------------ |
| compile
| Compiles JS files from the src
directory using Babel. Contains a single loader named babel
. From neutrino-middleware-compile-loader
. | all |
| style
| Allows importing CSS stylesheets from modules. Contains two loaders named style
and css
. From neutrino-middleware-style-loader
. | all |
| img
, svg
, ico
| Allows import image files from modules. Each contains a single loader named url
. From neutrino-middleware-image-loader
. | all |
| woff
, ttf
| Allows importing WOFF and TTF font files from modules. Each contains a single loader named url
. From neutrino-middleware-font-loader
. | all |
| eot
| Allows importing EOT font files from modules. Contains a single loader named file
. From neutrino-middleware-font-loader
. | all |
Override configuration
By following the customization guide and knowing the rule, loader, and plugin IDs above, you can override and augment the build by by providing a function to your .neutrinorc.js
use array. You can also make these changes from the Neutrino API in custom middleware.