gnoll
Tool for fast and easy bootstraping Webpack & React projects
Last updated 2 months ago by sunflowerdeath .
Unlicense · Original npm · Tarball
$ cnpm install gnoll 
SYNC missed versions from official npm registry.

Gnoll :japanese_ogre:

Tool for fast and easy bootstraping Webpack & React projects. It can perform basic tasks without any configuration files. But if you need to change some settings, you can create config files in the your project and extend the default configuration.

Table of content

Install

npm install gnoll

Gnoll has command line interface. You can add commands to the package.json file:

{
  "scripts": {
    "start": "gnoll start",
    "build": "gnoll build"
  }
}

Commands

gnoll build

Creates optimized production build.

Options

  • -e, --entry path
    Default: ./src/index.js
    Webpack entry file.

  • -o, --out path
    Default: ./build
    Path to the output directory.

  • --html path/to/index.html
    Default: ./src/index.html (if exists)
    Page that will be bundled with automatically injected assets using html-webpack-plugin.
    If you want to explicitly disable building html, use option --no-html.

  • --config path/to/webpack.config.js
    This option allows to provide path to the custom webpack config file.

  • --env=development|production
    Default: production
    Value of the NODE_ENV environment variable.

  • --target=web|node
    Default: web
    This options allows to specify target platform.

    • babel-preset-env transpiles for node target
    • sets webpack: libraryTarget commonjs target: node
  • --assets-caching
    This option enables optimizations for long term caching of static assets.
    Optimizations are based on this guide from webpack documentation – https://webpack.js.org/guides/caching/

    • It inserts hash of file content in its filename. This allows to cache files forever, because changed files will always have different names.
    • Generates manifest.json file that maps original filenames to hashed ones.

gnoll watch

Creates development build and rebuild on changes.
This command has same options as build, but default value for the --env option is development

gnoll start

Starts webpack development server.
This command has the same options as build except for --env (it always is set to development) and --target (always is web)

gnoll lib

Use this command if you want to build library that should provide modules.
When building library, js files are compiled by Babel. Format of the modules is changed to CommonJS. All other files are copied as is. Result is placed in the lib directory.

Options:

--target=web|node

-e, --entry
Default: ./src

-o, --out
Default: ./lib

--watch
Starts watcher that recompiles files on changes.

--source-maps
Embed inline source maps into compiled files.

Configuration

This section describes how you can change configuration.

Webpack

Default webpack config includes following loaders:

  • babel-loader for js and jsx files
  • file-loader for the following formats:
    • images: png svg jpg jpeg gif webp
    • fonts: eot ttf woff woff2
    • media: mp4 ogg webm mp3

Building styles is not included in gnoll by default, but you can add it with gnoll-scss plugin.

If you want to change something in the webpack config, you can create webpack.config.js in your project and extend the default config. For convenience, you can use webpack-merge for merging several webpack configs.

const merge = require('webpack-merge')
const baseConfig = require('gnoll/config/webpack')

module.exports = merge(baseConfig, {
    plugins [
        somePlugin
    ],
    module: {
        rules: [
            { test: /\.smth$/, loader: 'some-loader' }
        ]
    }
}

Extracting vendor and runtime chunks

TODO

Babel

Javascript is compiled with Babel. Default config uses following presets:

  • babel-preset-env (ES6 syntax features)
  • babel-preset-react (JSX syntax)
  • babel-preset-stage-0 (Unfinished proposals to the ES standard)

If you want to change change babel config, you can create .babelrc or babel.config.js file in the your project or set babel property in the package.json.

For example, this is how you can add support for decorators:

// babel.config.js
const baseConfig = require('gnoll/config/babel')

module.exports = {
    ...baseConfig,
    plugins: [
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        '@babel/plugin-proposal-decorators',
    ]
}

Browsers

TODO

Env vars

NODE_ENV
GNOLL_TARGET
GNOLL_ASSETS_CACHING
GNOLL_DEV_SERVER
GNOLL_LIB

License

Public domain, see the LICENCE file.

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 28
Last Day 0
Last Week 0
Last Month 84
Dependencies (26)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2018 © taobao.org |