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

neutrino-preset-component

v0.0.1

Published

Neutrino preset for building library, components and such

Downloads

5

Readme

Neutrino Library Preset Build Status

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.