A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
OTHER License
Bot releases are hidden (Show)
Added:
--copy-files
flag for React component builds to copy files which will not be transpiled over to the build directories [#58]Added:
inferno-app
and preact-app
- use these with nwb new
or nwb init
to develop Inferno and Preact apps [#194]--inferno
flag to React app builds to create an inferno-compat build [#194]react-jsx-source
and react-jsx-self
Babel transforms are now enabled for React apps in development mode for improved debugging.--no-git
flag to disable this.nwb test
: nwb test-react
, nwb-test-inferno
and nwb-test-preact
.audio
loader and an svg
loader.Removed:
nwb test
will run the new nwb test-react
command if you have a react-app
or react-component
project type in nwb.config.js
.webpack.plugins
config in nwb.config.js
- this config must now be moved up into webpack
instead.Changed:
.svg
files has been moved from the graphics
loader to the new svg
loader so inlining can be configured separately. This matters if you're using a sprite system, as base64 inlining SVGs breaks fragment identifiers.babel-plugin-transform-runtime
configuration to make use of new moduleName
config; Webpack module resolution no longer uses a blanket fallback to nwb's node_modules/
for serving and builds.webpack.uglify
config can now be set to false
to disable use of UglifyJSPlugin
in production builds for debugging [#160]Dependencies:
moduleName
config to specify runtime pathscrew_ie8
is now enabled by default; fix for Babel sourcemap issueHeaders
to be spec-compliantExperimental:
react run
can now run modules which export a React component or element.Added:
reload
option to Express middleware to enable reloading the page if Hot Module Reloading is unsuccessful [#168]Breaking Changes:
Dropped Node.js v0.12 support
Based on the engines
config of nwb's dependencies, Node.js v4.2.0 is now the minimum required version.
Upgraded from Babel 5 to Babel 6 [#12] [#31] [@geowarin]
Babel 6 introduced a number of breaking changes which you may need to account for in your codebase if you're using nwb or were otherwise using Babel 5.
babel
config in nwb.config.js
is no longer directly equivalent to what you would put in a .babelrc
file.
Added support for long-term caching [#73]
A deterministic hash is now included in the filenames of generated .js
and .css
files.
The Webpack manifest (required for module loading) is now extracted and automatically injected prior to the </body>
tag, so your HTML template must have a </body>
tag.
If you do any post-build processing on generated files it might need to be updated, as production app builds will now generate files as [name].[hash].[ext]
instead of [name].[ext]
.
Dropped support for the .jsx
extension
You can use
webpack.loaders
config to set/\.jsx?$/
asbabel-loader
'stest
config andwebpack.extra config
to add.jsx
back to theresolve.extensions
list if you're using.jsx
files and can't reasonably migrate away.
Dropped build-module
and build-umd/clean-umd
commands
These were a confusing middle layer which split the implementation of building a React component or browser-focused npm module in two. They both required a config file to provide a project type
for nwb to figure out what to do.
They've been replaced with build-react-component
and build-web-module
commands, which are now used in package.json
scripts
in the corresponding project templates.
As a result having a config file is now optional for all project types. If you don't need configuration, you can delete the nwb.config.js
file created as a convenience by project templates.
A config file is now only required if you want to use the generic build
, clean
and serve
commands.
Changed ES6 module build directory from es6/
to es/
Upgrade steps:
"es6/index.js"
with "es/index.js"
in package.json
"jsnext:main"
config"module": "es/index.js"
, as this is part of a proposal for native module support which is being supported by multiple bundlers."es6"
with "es"
in package.json
files
configDropped webpack.vendorBundle
config in favour of a --no-vendor
flag
Making this feature toggle a command line argument makes it easier to try, and to combine with other feature toggles like --preact
.
Tweak your package.json
"build"
script instead if you were using webpack.vendorBundle: false
config:
{
"scripts": {
"build": "nwb build-react-app --no-vendor"
}
}
nwb.config.js
Config Format Changes:
For deprecations, nwb v0.12 will support the old format, display warning messages about the changes required, and adapt the old format for use in the current build where possible.
build
config is deprecated in favour of new npm
config, which is a slightly different format.
nwb will adapt any build
config it finds for the current build and log out the equivalent npm
config.
// < v0.12 // v0.12
module.exports = { module.exports = {
build: { => npm: {
jsNext: true, esModules: true,
umd: true, => umd: {
global: 'MyComponent', global: 'MyComponent',
externals: {'react': 'React'} externals: {'react': 'React'}
} }
} }
}
// < v0.12 // v0.12 - simple UMD config without externals
module.exports = { module.exports = {
build: { => npm: {
jsNext: true, esModules: true,
umd: true, => umd: 'myLib'
global: 'MyLib' }
} }
}
The Babel runtime transform is now configured using new babel.runtime
config instead of Babel 5's optional
config.
The runtime transform is now partially-enabled by default to support use of async
/await
and generators, so update your configuration accordingly. nwb will adapt ['runtime']
config for the current build by converting it to true
.
// < v0.12 // v0.12 - enabled by default for regenerator
module.exports = {
babel: {
optional: ['runtime'] => // You can remove your config if you were
} // using it for async/await or generators
}
// < v0.12 // v0.12 - also import helpers from
module.exports = { module.exports = {
babel: { babel: {
optional: ['runtime'] => runtime: 'helpers'
} }
} }
babel.loose
config is now Boolean instead of Babel 5's string config.
Loose mode is now enabled by default, so loose
config is only used if you need to disable loose mode.
// < v0.12 // v0.12 - enabled by default
module.exports = {
babel: {
loose: 'all' => (none)
}
}
// < v0.12 - loose mode not used // v0.12 - disabling loose mode
module.exports = {
babel: {
(none) => loose: false
}
}
karma.tests
config is deprecated in favour of new karma.testContext
and karma.testFiles
config, depending on which was being specified. If karma.tests
is present, nwb will attempt to detect the appropriate new config to use it for, or will otherwise fall back to the new default config.
// < v0.12 // v0.12 - using a Webpack context module
module.exports = { module.exports = {
karma: { karma: {
tests: 'tests.webpack.js' => testContext: 'tests.webpack.js'
} }
} }
// < v0.12 // v0.12 - custom test file glob
module.exports = { module.exports = {
karma: { karma: {
tests: 'test/**.test.js' => testFiles: 'test/**.test.js'
} }
} }
Developer Experience Improvements:
Added a check-config
command which checks your nwb configuration file for errors and deprecated usage, and provides some usage hints (e.g. where more convenient config is available).
Run this after upgrading your nwb version and it will tell you what needs to be changed.
New user-friendly output for Webpack builds based on create-react-app's.
This provides friendlier error and warning reporting, reports the gzipped size of generated files and uses a persistent console for development server logging.
Windows Note: running a development server will clear the current screen in your console - in Windows the escape codes used to do this have the unfortunate effect of clearing all the scrollback history in your current console.
To avoid this use the start
command to spawn a new command window when running the development server in Windows, e.g.:
start npm start
start react run app.js
Apps can now use fetch
, async
/await
and generators out of the box without any configuration.
Promise
, fetch
, Object.assign
polyfills and the regenerator runtime are now provided by default.
You can now transform destructured imports to cherry-picked imports for specified modules using new babel.cherryPick
config [#141]
Case-sensitivity of require
/import
paths is now enforced by CaseSensitivePathsPlugin
, avoiding an easy-to-overlook cause of CI build failure if you don't develop on Linux.
If the intended dev server port is not available, you will now be prompted to continue with a different, free port.
React App Optimisations:
Production React builds now remove propTypes
from ES6 class and stateless functional components (but not from your dependencies) using react-remove-prop-types [#97]
Added a --preact
flag to React app builds to create a preact-compat build.
This is an easy way to try Preact with your React apps, resulting in a much smaller bundle if your app is compatible [#124]
Babel:
nwb implements its own support for a Babel 6 equivalent of Babel 5's stage
configuration to choose which experimental features are enabled, including defaulting to Stage 2.
For stage 2 and below, decorators can be use by default, as nwb will include the Babel Legacy Decorator transform plugin. See the plugin's Best Effort documentation for differences you will need to take into account if you were using Babel 5 decorators.
nwb preserves CommonJS interop for apps and component ES5 builds using the add-module-exports
plugin.
This means a .default
doesn't need to be tagged on when you're using require()
with Webpack's code-splitting, or when people import your npm modules using require()
directly.
Babel 6 removed interop with CommonJS exports, as it allowed you to write broken ES6 code. Kent C. Dodds has a post about this which is well worth reading to understand what not to do.
Loose mode is now enabled by default.
Changed babel.loose
config to Boolean.
This is now only needed if you want to disable loose mode (e.g. in non-production environments to check for ES6 compliance errors in normal mode).
Added babel.runtime
config to configure the Babel runtime transform, replacing Babel 5's optional
config.
This is turned on by default, configured to import the regenerator runtime when async
/await
or generators are used.
Removed the inline element transform optimisation for React app production builds, as the Babel 6 version of it currently depends on polyfilling Symbol
.
Karma:
Changed default testing configuration to support co-location of tests and a wider range of test file names and locations. This should be backwards-compatible with the previous defaults.
-test.js
, .test.js
or .spec.js
files anywhere underneath a src/
, test/
or tests/
directory.test/
, tests/
or any __tests__/
directory inside src/
by default, as well as test files.Added karma.browsers
config to customise which browsers tests are run in.
The plugin to support use of 'Chrome'
in this config is also available by default.
Added karma.testDirs
config to control which directories are excluded from code coverage reporting.
babel-plugin-istanbul
is now used to instrument code for test coverage instead of isparta-loader
.
Webpack:
Default Loader Config
css-loader
's use of Autoprefixer - nwb's PostCSS configuration is now the only source of prefix addition and removal [#132]url-loader
(which falls back to file-loader
) to allow you to configure inlining for any group of static files if needed.limit
config for all static file loaders to 1
, effectively disabling inlining by default - if you want resources smaller than a given size to be inlined, configure limit
using webpack.loaders
config..svg
files from the fonts
loader to the graphics
loader..eot
files to the fonts
loader and removed the eot
loader.video
loader for .mp4'
, .ogg
and .webm
..webp
to the graphics
loader.Default Plugin Config
UglifyJsPlugin
options to strip comments from output and use the screw_ie8
setting in every minification step.Configuration
webpack.aliases
config to set up module resolving aliases, as a convenient alternative to using webpack.extra.resolve.alias
[#125]webpack.autoprefixer
config to configure Autoprefixer in nwb's default PostCSS configuration [#132]webpack.publicPath
config to set up or clear the path/URL used for static resources, as a convenient alternative to using webpack.extra.output.publicPath
.webpack.uglify
config to allow customisation of Webpack UglifyJsPlugin
options.webpack.compat
config now supports 'json-schema': true
to prevent a transitive json-schema
dependency breaking Webpack builds. This usually manifests itself as an Uncaught Error: define cannot be used indirect
error.module.noParse
config is now an Array
, so any user-provided config for it in webpack.extra
(which should also be specified as an Array
) can now be merged into it.npm Build:
When creating a project with an ES6 modules build enabled, a "module"
property will be added to the project's package.json
as well as "jsnext:main"
[#137]
This is the default property Webpack 2 uses to look for an ES6 modules build.
build
config is deprecated in favour of new npm
config.
React component builds now wrap propTypes
for ES6 class and stateless functional components with an environment check - if (process.env.NODE_ENV !== 'production')
- so they'll automatically be stripped from the production build in apps which use them. [#145]
propTypes
will be stripped from the minified UMD build.
This can be disabled by passing a --no-proptypes
flag.
Building a React demo app during a React component build can now be skipped by passing a --no-demo
flag [#155]
Other Configuration:
--no-fallback
flag.polyfill
config to disable default polyfilling of Promise
and fetch
for apps if you don't need it and want to shave a few KB off your build.PORT
environment variable. The CLI --port
takes precedence if both are provided.CLI:
nwb check-config
command.-g, --global
argument for enabling a UMD build when creating a React component or web module project, in favour of passing a name to the --umd
argument instead.--info
flag for showing webpack output, as this is now handled in a more developer-friendly manner.Starter Projects:
<meta>
tags in HTML templates are now all first thing in <head>
.shrink-to-fit=no
to the viewport
<meta>
tag in HTML templates for Safari.Dependencies:
Fixed:
node_modules/
loader for CSS preprocessor plugins [#129]Breaking Changes:
autoprefixer-loader
with postcss-loader
in default style pipelines - it's configured to do the same autoprefixing by default [#57]
webpack.loaders.autoprefixer
, you will now need to manage an autprefixer
dependency yourself and use webpack.postcss
to perform this configuration.nwb.config.js
Config Format Changes:
For deprecations, nwb v0.11 will support the old format and display warning messages about the changes required.
webpack.plugins
is deprecated - config under webpack.plugins
should be moved up into webpack
instead. Having certain config under a plugins
prop was an implementation detail which wasn't relevant to end-users [#113]
// < v0.11
module.exports = {
webpack: {
plugins: {
define: {...},
html: {...}
}
}
}
// v0.11
module.exports = {
webpack: {
define: {...},
html: {...}
}
}
Support for flatter Webpack loader configuration was added. Having a query
object is now optional - loader query configuration can now be placed directly under the loader's id [#113]
// < v0.11
module.exports = {
webpack: {
loaders: {
css: {
query: {
modules: true
}
}
}
}
}
// v0.11
module.exports = {
webpack: {
loaders: {
css: {
modules: true
}
}
}
}
Added:
react
command for quick React development starting from a single file.
react run entry.js
runs a development server.react build entry.js
creates a static build.async
/await
.serve-react
and (new) build-react
nwb commands.build
and serve
commands. The default is still src/index.js
. [#115]build
, clean
and serve
commands. The default is still dist/
.webpack.compat
config to enable compatibility tweaks for modules which are known to be problematic with Webpack - initially this includes support for Enzyme, Moment.js and Sinon.js 1.x [#108]webpack.postcss
config to customise the PostCSS plugins applied to each style pipeline [#57]webpack.vendorBundle
config to disable automatically extracting anything imported from node_modules/
out into a separate vendor
chunk [#106]--config
option to allow you to specify your own config file instead of nwb.config.js
.Changed:
src/index.html
will continue to be used if a file exists there. If an alternative template is not provided via webpack.html
config, nwb will now fall back to using a basic template.babel-loader
config now uses cacheDirectory: true
for a speedup.DEBUG=nwb
environment variable) to print config objects in full - if you're configuring plugin objects (e.g. PostCSS plugins), it's recommended to create instances of them if you want to use debug output.webpack.optimize.DedupePlugin
is now only used for production builds, as recommended in the Webpack docs.Dependencies:
dev
option controls where installed dependencies get saved toBreaking Changes:
Changed:
showDiff: true
config for the default Mocha reporter.webpack building...
message so you know you're waiting for the initial build.react-app
and web-app
projects now use project type-specific commands, so the nwb.config.js
included with them can be deleted if you don't need any config tweaks.--save
option to npm when installing React dependencies, to honour any npm save-exact (recommended!) or save-prefix config you have set.Added:
karma.extra
Object.--react
option to allow you to set the version of React which will be installed when creating apps or components. This defaults to whatever the stable version of React was when the version of nwb
you're using was released.Dependencies:
Dependencies:
Breaking Changes:
Builds are now generated in dist/
instead of public/build/
index.html
for builds is now generated based on a template in src/index.html
, instead of using a static public/index.html
[#34]
Upgrading existing projects:
public/index.html
to src/index.html
and delete the <link>
and <script>
tags for vendor
and app
resources. These will now be injected at build time./public/build
in your .gitignore
with /dist/
public/
is now only for public files - any contents in this directory will now be copied to dist/
at the start of a build. The development server will also serve static content from public/
.
Removed:
nwb.config.js
format changes made in 0.8 have been removed.Added:
--host
option when running the dev server [#50]ExtractTextPlugin
(used to extract CSS when building) can now be configured using webpack.plugins.extractText
config - this allows you to configure the allChunks
setting if you want all CSS to be extracted when using code splitting.HtmlWebpackPlugin
(used to generate an index.html
when building) can now be configured using webpack.plugins.html
config.Changed:
breakConfig: true
has been added to default babel-loader
config to avoid .babelrc
files being resolved by Babel - all Babel configuration is expected to be in nwb.config.js
[#63]file-loader
now include a hash in their filenames for cachebusting when they change [#38]Dependencies:
Accept
headerscopy
and emptyDir
resolve.alias
and resolve.root
support [#83]Dependencies:
Published by insin over 8 years ago
Breaking Changes:
npm-install-webpack-plugin
is now used instead of npm-install-loader
to implement nwb serve --auto-install
.
If you were configuring automatic npm installation using a loaders.install.query.cli
config object, this should be moved to webpack.plugins.install
instead.
nwb.config.js
Format Changes:
nwb v0.8 will support the old format and display warning messages about the changes required before upgrading to nwb v0.9.
React component and vanilla JS module npm build configuration must now be specificed as a build
object:
// < v0.9
module.exports = {
type: 'react-component',
externals: {react: 'React'},
global: 'MyComponent',
jsNext: true,
umd: true
}
// v0.9
module.exports = {
type: 'react-component',
build: {
externals: {react: 'React'},
global: 'MyComponent',
jsNext: true,
umd: true
}
}
Webpack configuration must now be specified as a webpack
object:
// < v0.9
module.exports = {
type: 'react-app',
loaders: {
css: {
query: {
modules: true
}
}
}
}
// v0.9
module.exports = {
type: 'react-app',
webpack: {
loaders: {
css: {
query: {
modules: true
}
}
}
}
}
Webpack define
config must now be specified in a plugins
object:
// < v0.9
module.exports = {
type: 'react-app',
define: {
__VERSION__: JSON.stringify(require('./package.json').version)
}
}
// v0.9
module.exports = {
type: 'react-app',
webpack: {
plugins: {
define: {
__VERSION__: JSON.stringify(require('./package.json').version)
}
}
}
}
All "extra" Webpack config must be specified in a an extra
object, including extra loaders. The new object must correspond with Webpack's config file layout.
// < v0.9
module.exports = {
type: 'react-app',
loaders: {
extra: [/* ... */]
}
}
// v0.9
module.exports = {
type: 'react-app',
webpack: {
extra: {
module: {
loaders: [/* ... */]
}
}
}
}
Changes:
nwb.config.js
is now only required when running generic build commands: build
, clean
, serve
, test
type
config is only required when running a generic build command, but if provided it must be valid.--server
flag - this allows you to use --server
in your default npm test
command if you want to, without needing a separate run script for CI.README.md
to a CONTRIBUTING.md
file, and are now documented using npm
and npm run
commands instead of global nwb
commands.require.resolve()
full paths to extra Babel plugins configured in nwb.config.js
, just use their names as normal and Babel will now be able to import them.Added:
webpack.extra
Object.
extra
, if a function is exported from nwb.config.js
, it will now be called with an object containing the following properties:
command
- the nwb command being executedwebpack
- the webpack module (for configuring extra plugins using nwb's version of webpack)build
, clean
and serve
commands are now officially documented for direct use.test:watch
npm script was added to project template package.json
.Dependencies:
which
dependency (minor)allowDots
option and some fixesnode_modules
paths on Windowsres.send
when availablestrip-ansi
dependency (major), update stats handlingFixed:
react-app
and web-app
Webpack build config didn't have output.publicPath
set, so images required from JavaScript weren't being found [#55]Dependencies:
Fixed:
Added:
autoInstall
option to Express middleware.Dependencies:
Fixed:
babel-runtime
can be picked up when optional: ['runtime']
is used [hopefully fixing the weird /node_modules/node_modules/
issue seen in #37]Added:
--auto-install
flag to nwb serve
which automatically installs npm dependencies and saves them to your package.json while developing.Removed:
jsNext
config no longer defaults to true
if not present.Changed:
.x
for dependencies when generating skeleton project package.json
instead of range sigils.Dependencies:
optional: ['runtime']
Fixed:
nwb test
[#36] [jihchi]Dependencies: