Deploy #328
Deploy #328
Conversation
Move some js packages to devDependencies
|
New dependencies added: @babel/preset-reactAuthor: Sebastian McKenzie Description: Babel preset for all React plugins. Homepage: https://babeljs.io/
|
| Created | almost 5 years ago |
| Last Updated | 8 months ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 63 |
| Direct Dependencies | find-cache-dir, loader-utils, mkdirp and pify |
| Keywords | webpack, loader, babel, es6, transpiler and module |
@babel/preset-env
Author: Henry Zhu
Description: A Babel preset for each environment.
Homepage: https://babeljs.io/
README
@babel/preset-env
A Babel preset for each environment.
See our website @babel/preset-env for more information or the issues associated with this package.
Install
Using npm:
npm install --save-dev @babel/preset-envor using yarn:
yarn add @babel/preset-env --devbabel-plugin-styled-components
Author: Unknown
Description: Improve the debugging experience and add server-side rendering support to styled-components
Homepage: http://npmjs.com/package/babel-plugin-styled-components
| Created | about 3 years ago |
| Last Updated | 6 months ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 66 |
| Direct Dependencies | @babel/helper-annotate-as-pure, @babel/helper-module-imports, babel-plugin-syntax-jsx and lodash |
| Keywords | styled-components, css-in-js, babel-plugin, server-side rendering, ssr and displayName |
README
babel-plugin-styled-components
This plugin is a highly recommended supplement to the base styled-components library, offering some useful features:
- consistently hashed component classNames between environments (a must for server-side rendering)
- better debugging through automatic annotation of your styled components based on their context in the file system, etc.
- various types of minification for styles and the tagged template literals styled-components uses
Quick start
Install the plugin first:
npm install --save-dev babel-plugin-styled-components
Then add it to your babel configuration:
{
"plugins": ["babel-plugin-styled-components"]
}Documentation
The documentation for this plugin lives on the styled-components website!
License
Licensed under the MIT License, Copyright © 2016-present Vladimir Danchenkov and Maximilian Stoiber.
See LICENSE.md for more information.
css-loader
Author: Tobias Koppers @sokra
Description: css loader module for webpack
Homepage: https://github.com/webpack-contrib/css-loader
| Created | over 7 years ago |
| Last Updated | 17 days ago |
| License | MIT |
| Maintainers | 7 |
| Releases | 99 |
| Direct Dependencies | camelcase, cssesc, icss-utils, loader-utils, normalize-path, postcss, postcss-modules-extract-imports, postcss-modules-local-by-default, postcss-modules-scope, postcss-modules-values, postcss-value-parser and schema-utils |
| Keywords | webpack, css, loader, url and import |
enzyme-adapter-react-16
Author: Leland Richardson
Description: JavaScript Testing utilities for React
Homepage: https://airbnb.io/enzyme/
| Created | over 2 years ago |
| Last Updated | 15 days ago |
| License | MIT |
| Maintainers | 7 |
| Releases | 37 |
| Direct Dependencies | enzyme-adapter-utils, enzyme-shallow-equal, has, object.assign, object.values, prop-types, react-is, react-test-renderer and semver |
| Keywords | javascript, shallow rendering, shallowRender, test, reactjs, react, flux, testing, test utils, assertion helpers, tdd and mocha |
README
Enzyme
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output.
You can also manipulate, traverse, and in some ways simulate runtime given the output.
Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation
and traversal.
Upgrading from Enzyme 2.x or React < 16
Are you here to check whether or not Enzyme is compatible with React 16? Are you currently using
Enzyme 2.x? Great! Check out our migration guide for help
moving on to Enzyme v3 where React 16 is supported.
Installation
To get started with enzyme, you can simply install it via npm. You will need to install enzyme
along with an Adapter corresponding to the version of react (or other UI Component library) you
are using. For instance, if you are using enzyme with React 16, you can run:
npm i --save-dev enzyme enzyme-adapter-react-16Each adapter may have additional peer dependencies which you will need to install as well. For instance,
enzyme-adapter-react-16 has peer dependencies on react and react-dom.
At the moment, Enzyme has adapters that provide compatibility with React 16.x, React 15.x,
React 0.14.x and React 0.13.x.
The following adapters are officially provided by enzyme, and have the following compatibility with
React:
| Enzyme Adapter Package | React semver compatibility |
|---|---|
enzyme-adapter-react-16 |
^16.4.0-0 |
enzyme-adapter-react-16.3 |
~16.3.0-0 |
enzyme-adapter-react-16.2 |
~16.2 |
enzyme-adapter-react-16.1 |
~16.0.0-0 || ~16.1 |
enzyme-adapter-react-15 |
^15.5.0 |
enzyme-adapter-react-15.4 |
15.0.0-0 - 15.4.x |
enzyme-adapter-react-14 |
^0.14.0 |
enzyme-adapter-react-13 |
^0.13.0 |
Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can use
the top level configure(...) API.
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });3rd Party Adapters
It is possible for the community to create additional (non-official) adapters that will make enzyme
work with other libraries. If you have made one and it's not included in the list below, feel free
to make a PR to this README and add a link to it! The known 3rd party adapters are:
| Adapter Package | For Library | Status |
|---|---|---|
enzyme-adapter-preact-pure |
preact |
(stable) |
enzyme-adapter-inferno |
inferno |
(work in progress) |
Running Enzyme Tests
Enzyme is unopinionated regarding which test runner or assertion library you use, and should be
compatible with all major test runners and assertion libraries out there. The documentation and
examples for enzyme use mocha and chai, but you
should be able to extrapolate to your framework of choice.
If you are interested in using enzyme with custom assertions and convenience functions for
testing your React components, you can consider using:
chai-enzymewith Mocha/Chai.jasmine-enzymewith Jasmine.jest-enzymewith Jest.should-enzymefor should.js.expect-enzymefor expect.
Using Enzyme with React Native
Using Enzyme with Tape and AVA
Basic Usage
Shallow Rendering
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import MyComponent from './MyComponent';
import Foo from './Foo';
describe('<MyComponent />', () => {
it('renders three <Foo /> components', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo)).to.have.lengthOf(3);
});
it('renders an `.icon-star`', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
});
it('renders children when passed in', () => {
const wrapper = shallow((
<MyComponent>
<div className="unique" />
</MyComponent>
));
expect(wrapper.contains(<div className="unique" />)).to.equal(true);
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
});Read the full API Documentation
Full DOM Rendering
import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'enzyme';
import Foo from './Foo';
describe('<Foo />', () => {
it('allows us to set props', () => {
const wrapper = mount(<Foo bar="baz" />);
expect(wrapper.props().bar).to.equal('baz');
wrapper.setProps({ bar: 'foo' });
expect(wrapper.props().bar).to.equal('foo');
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = mount((
<Foo onButtonClick={onButtonClick} />
));
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
it('calls componentDidMount', () => {
sinon.spy(Foo.prototype, 'componentDidMount');
const wrapper = mount(<Foo />);
expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
Foo.prototype.componentDidMount.restore();
});
});Read the full API Documentation
Static Rendered Markup
import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';
import Foo from './Foo';
describe('<Foo />', () => {
it('renders three `.foo-bar`s', () => {
const wrapper = render(<Foo />);
expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
});
it('renders the title', () => {
const wrapper = render(<Foo title="unique" />);
expect(wrapper.text()).to.contain('unique');
});
});Read the full API Documentation
React Hooks support
Enzyme supports react hooks with some limitations in .shallow() due to upstream issues in React's shallow renderer:
-
useEffect()anduseLayoutEffect()don't get called in the React shallow renderer. Related issue -
useCallback()doesn't memoize callback in React shallow renderer. Related issue
ReactTestUtils.act() wrap
If you're using React 16.8+ and .mount(), Enzyme will wrap apis including .simulate(), .setProps(), .setContext(), .invoke() with ReactTestUtils.act() so you don't need to manually wrap it.
A common pattern to trigger handlers with .act() and assert is:
const wrapper = mount(<SomeComponent />);
act(() => wrapper.prop('handler')());
wrapper.update();
expect(/* ... */);We cannot wrap the result of .prop() (or .props()) with .act() in Enzyme internally since it will break the equality of the returned value.
However, you could use .invoke() to simplify the code:
const wrapper = mount(<SomeComponent />);
wrapper.invoke('handler')();
expect(/* ... */);Future
Contributing
See the Contributors Guide
In the wild
Organizations and projects using enzyme can list themselves here.
License
enzyme
Author: Leland Richardson
Description: JavaScript Testing utilities for React
Homepage: https://airbnb.io/enzyme/
| Created | about 4 years ago |
| Last Updated | 15 days ago |
| License | MIT |
| Maintainers | 8 |
| Releases | 54 |
| Direct Dependencies | array.prototype.flat, cheerio, enzyme-shallow-equal, function.prototype.name, has, html-element-map, is-boolean-object, is-callable, is-number-object, is-regex, is-string, is-subset, lodash.escape, lodash.isequal, object-inspect, object-is, object.assign, object.entries, object.values, raf, rst-selector-parser and string.prototype.trim |
| Keywords | javascript, shallow rendering, shallowRender, test, reactjs, react, flux, testing, test utils, assertion helpers, tdd and mocha |
README
Enzyme
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output.
You can also manipulate, traverse, and in some ways simulate runtime given the output.
Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation
and traversal.
Upgrading from Enzyme 2.x or React < 16
Are you here to check whether or not Enzyme is compatible with React 16? Are you currently using
Enzyme 2.x? Great! Check out our migration guide for help
moving on to Enzyme v3 where React 16 is supported.
Installation
To get started with enzyme, you can simply install it via npm. You will need to install enzyme
along with an Adapter corresponding to the version of react (or other UI Component library) you
are using. For instance, if you are using enzyme with React 16, you can run:
npm i --save-dev enzyme enzyme-adapter-react-16Each adapter may have additional peer dependencies which you will need to install as well. For instance,
enzyme-adapter-react-16 has peer dependencies on react and react-dom.
At the moment, Enzyme has adapters that provide compatibility with React 16.x, React 15.x,
React 0.14.x and React 0.13.x.
The following adapters are officially provided by enzyme, and have the following compatibility with
React:
| Enzyme Adapter Package | React semver compatibility |
|---|---|
enzyme-adapter-react-16 |
^16.4.0-0 |
enzyme-adapter-react-16.3 |
~16.3.0-0 |
enzyme-adapter-react-16.2 |
~16.2 |
enzyme-adapter-react-16.1 |
~16.0.0-0 || ~16.1 |
enzyme-adapter-react-15 |
^15.5.0 |
enzyme-adapter-react-15.4 |
15.0.0-0 - 15.4.x |
enzyme-adapter-react-14 |
^0.14.0 |
enzyme-adapter-react-13 |
^0.13.0 |
Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can use
the top level configure(...) API.
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });3rd Party Adapters
It is possible for the community to create additional (non-official) adapters that will make enzyme
work with other libraries. If you have made one and it's not included in the list below, feel free
to make a PR to this README and add a link to it! The known 3rd party adapters are:
| Adapter Package | For Library | Status |
|---|---|---|
enzyme-adapter-preact-pure |
preact |
(stable) |
enzyme-adapter-inferno |
inferno |
(work in progress) |
Running Enzyme Tests
Enzyme is unopinionated regarding which test runner or assertion library you use, and should be
compatible with all major test runners and assertion libraries out there. The documentation and
examples for enzyme use mocha and chai, but you
should be able to extrapolate to your framework of choice.
If you are interested in using enzyme with custom assertions and convenience functions for
testing your React components, you can consider using:
chai-enzymewith Mocha/Chai.jasmine-enzymewith Jasmine.jest-enzymewith Jest.should-enzymefor should.js.expect-enzymefor expect.
Using Enzyme with React Native
Using Enzyme with Tape and AVA
Basic Usage
Shallow Rendering
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import MyComponent from './MyComponent';
import Foo from './Foo';
describe('<MyComponent />', () => {
it('renders three <Foo /> components', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo)).to.have.lengthOf(3);
});
it('renders an `.icon-star`', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
});
it('renders children when passed in', () => {
const wrapper = shallow((
<MyComponent>
<div className="unique" />
</MyComponent>
));
expect(wrapper.contains(<div className="unique" />)).to.equal(true);
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
});Read the full API Documentation
Full DOM Rendering
import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'enzyme';
import Foo from './Foo';
describe('<Foo />', () => {
it('allows us to set props', () => {
const wrapper = mount(<Foo bar="baz" />);
expect(wrapper.props().bar).to.equal('baz');
wrapper.setProps({ bar: 'foo' });
expect(wrapper.props().bar).to.equal('foo');
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = mount((
<Foo onButtonClick={onButtonClick} />
));
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
it('calls componentDidMount', () => {
sinon.spy(Foo.prototype, 'componentDidMount');
const wrapper = mount(<Foo />);
expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
Foo.prototype.componentDidMount.restore();
});
});Read the full API Documentation
Static Rendered Markup
import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';
import Foo from './Foo';
describe('<Foo />', () => {
it('renders three `.foo-bar`s', () => {
const wrapper = render(<Foo />);
expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
});
it('renders the title', () => {
const wrapper = render(<Foo title="unique" />);
expect(wrapper.text()).to.contain('unique');
});
});Read the full API Documentation
React Hooks support
Enzyme supports react hooks with some limitations in .shallow() due to upstream issues in React's shallow renderer:
-
useEffect()anduseLayoutEffect()don't get called in the React shallow renderer. Related issue -
useCallback()doesn't memoize callback in React shallow renderer. Related issue
ReactTestUtils.act() wrap
If you're using React 16.8+ and .mount(), Enzyme will wrap apis including .simulate(), .setProps(), .setContext(), .invoke() with ReactTestUtils.act() so you don't need to manually wrap it.
A common pattern to trigger handlers with .act() and assert is:
const wrapper = mount(<SomeComponent />);
act(() => wrapper.prop('handler')());
wrapper.update();
expect(/* ... */);We cannot wrap the result of .prop() (or .props()) with .act() in Enzyme internally since it will break the equality of the returned value.
However, you could use .invoke() to simplify the code:
const wrapper = mount(<SomeComponent />);
wrapper.invoke('handler')();
expect(/* ... */);Future
Contributing
See the Contributors Guide
In the wild
Organizations and projects using enzyme can list themselves here.
License
file-loader
Author: Tobias Koppers @sokra
Description: A file loader module for webpack
Homepage: https://github.com/webpack-contrib/file-loader
| Created | over 7 years ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 7 |
| Releases | 47 |
| Direct Dependencies | loader-utils and schema-utils |
| Keywords | webpack |
@babel/polyfill
Author: Sebastian McKenzie
Description: Provides polyfills necessary for a full ES2015+ environment
Homepage: https://babeljs.io/
| Created | about 2 years ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 41 |
| Direct Dependencies | core-js and regenerator-runtime |
README
@babel/polyfill
Provides polyfills necessary for a full ES2015+ environment
This package has been deprecated in favor of separate inclusion of required parts of core-js and regenerator-runtime. See our website @babel/polyfill for more information.
See our website @babel/polyfill for more information or the issues associated with this package.
Install
Using npm:
npm install --save @babel/polyfillor using yarn:
yarn add @babel/polyfill jest-styled-components
Author: Michele Bertoli
Description: Jest utilities for Styled Components
Homepage: http://npmjs.com/package/jest-styled-components
| Created | almost 3 years ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 92 |
| Direct Dependencies | css |
@babel/plugin-transform-runtime
Author: Unknown
Description: Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals
Homepage: http://npmjs.com/package/@babel/plugin-transform-runtime
| Created | about 2 years ago |
| Last Updated | 27 days ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 47 |
| Direct Dependencies | @babel/helper-module-imports, @babel/helper-plugin-utils, resolve and semver |
| Keywords | babel-plugin |
README
@babel/plugin-transform-runtime
Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals
See our website @babel/plugin-transform-runtime for more information.
Install
Using npm:
npm install --save-dev @babel/plugin-transform-runtimeor using yarn:
yarn add @babel/plugin-transform-runtime --devjest
Author: Unknown
Description: Delightful JavaScript Testing.
Homepage: https://jestjs.io/
| Created | almost 8 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 222 |
| Direct Dependencies | import-local and jest-cli |
| Keywords | ava, babel, coverage, easy, expect, facebook, immersive, instant, jasmine, jest, jsdom, mocha, mocking, painless, qunit, runner, sandboxed, snapshot, tap, tape, test, testing, typescript and watch |
@babel/plugin-syntax-dynamic-import
Author: Unknown
Description: Allow parsing of import()
Homepage: http://npmjs.com/package/@babel/plugin-syntax-dynamic-import
| Created | about 2 years ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 36 |
| Direct Dependencies | @babel/helper-plugin-utils |
| Keywords | babel-plugin |
README
@babel/plugin-syntax-dynamic-import
Allow parsing of import()
See our website @babel/plugin-syntax-dynamic-import for more information.
Install
Using npm:
npm install --save-dev @babel/plugin-syntax-dynamic-importor using yarn:
yarn add @babel/plugin-syntax-dynamic-import --devjson-loader
Author: Tobias Koppers @sokra
Description: json loader module for webpack
Homepage: https://github.com/webpack/json-loader#readme
| Created | almost 8 years ago |
| Last Updated | 7 months ago |
| License | MIT |
| Maintainers | 8 |
| Releases | 18 |
README
JSON Loader
Install
npm install --save-dev json-loader
⚠️ Sincewebpack >= v2.0.0, importing of JSON files will work by default. You might still want to use this if you use a custom file extension. See the v1.0.0 -> v2.0.0 Migration Guide for more information
Usage
Inline
const json = require('json-loader!./file.json');Configuration (recommended)
const json = require('./file.json');webpack.config.js
module.exports = {
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
}Maintainer
Tobias Koppers |
@babel/plugin-proposal-object-rest-spread
Author: Unknown
Description: Compile object rest and spread to ES5
Homepage: http://npmjs.com/package/@babel/plugin-proposal-object-rest-spread
| Created | about 2 years ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 51 |
| Direct Dependencies | @babel/helper-plugin-utils and @babel/plugin-syntax-object-rest-spread |
| Keywords | babel-plugin |
README
@babel/plugin-proposal-object-rest-spread
Compile object rest and spread to ES5
See our website @babel/plugin-proposal-object-rest-spread for more information.
Install
Using npm:
npm install --save-dev @babel/plugin-proposal-object-rest-spreador using yarn:
yarn add @babel/plugin-proposal-object-rest-spread --devreact-addons-test-utils
Author: Unknown
Description: This package provides the React TestUtils add-on.
Homepage: https://github.com/facebook/react#readme
| Created | over 4 years ago |
| Last Updated | almost 2 years ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 59 |
| Keywords | react and react-addon |
README
react-addons-test-utils
This package provides the React TestUtils add-on.
See https://facebook.github.io/react/docs/test-utils.html for more information.
This package is deprecated as of version 15.5.0:
- TestUtils have been moved to
react-dom/test-utils - Shallow renderer has been moved to
react-test-renderer/shallow
@babel/plugin-proposal-class-properties
Author: Unknown
Description: This plugin transforms static class properties as well as properties declared with the property initializer syntax
Homepage: http://npmjs.com/package/@babel/plugin-proposal-class-properties
| Created | about 2 years ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 47 |
| Direct Dependencies | @babel/helper-create-class-features-plugin and @babel/helper-plugin-utils |
| Keywords | babel-plugin |
README
@babel/plugin-proposal-class-properties
This plugin transforms static class properties as well as properties declared with the property initializer syntax
See our website @babel/plugin-proposal-class-properties for more information.
Install
Using npm:
npm install --save-dev @babel/plugin-proposal-class-propertiesor using yarn:
yarn add @babel/plugin-proposal-class-properties --devreact-test-renderer
Author: Unknown
Description: React package for snapshot testing.
Homepage: https://reactjs.org/
| Created | over 3 years ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 11 |
| Releases | 162 |
| Direct Dependencies | object-assign, prop-types, react-is and scheduler |
| Keywords | react, react-native and react-testing |
@babel/core
Author: Sebastian McKenzie
Description: Babel compiler core.
Homepage: https://babeljs.io/
| Created | about 2 years ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 61 |
| Direct Dependencies | @babel/code-frame, @babel/generator, @babel/helpers, @babel/parser, @babel/template, @babel/traverse, @babel/types, convert-source-map, debug, json5, lodash, resolve, semver and source-map |
| Keywords | 6to5, babel, classes, const, es6, harmony, let, modules, transpile, transpiler, var, babel-core and compiler |
README
@babel/core
Babel compiler core.
See our website @babel/core for more information or the issues associated with this package.
Install
Using npm:
npm install --save-dev @babel/coreor using yarn:
yarn add @babel/core --devstats-webpack-plugin
Author: Daniel Perez Alvarez
Description: Write the stats of a build to a file.
Homepage: https://github.com/unindented/stats-webpack-plugin#readme
| Created | about 5 years ago |
| Last Updated | over 1 year ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 19 |
| Direct Dependencies | lodash |
| Keywords | stats and webpack |
README
Stats plugin for webpack 
Writes the stats of a build to a file.
Installation
$ npm install --save-dev stats-webpack-pluginUsage
var StatsPlugin = require('stats-webpack-plugin');
module.exports = {
plugins: [
new StatsPlugin('stats.json', {
chunkModules: true,
exclude: [/node_modules[\\\/]react/]
})
]
};Give webpack the --profile flag or set profile: true in webpack.config to get detailed timing measurements.
See Webpack Profiling for more detail.
API
new StatsPlugin(path: string, [options])path: The path of the result file, relative to your output folder.options: Options passed to stats.toJson
Meta
- Code:
git clone git://github.com/unindented/stats-webpack-plugin.git - Home: https://github.com/unindented/stats-webpack-plugin/
Contributors
- Daniel Perez Alvarez ([email protected])
- Izaak Schroeder ([email protected])
License
Copyright (c) 2014 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.
@babel/cli
Author: Sebastian McKenzie
Description: Babel command line.
Homepage: https://babeljs.io/
| Created | about 2 years ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 52 |
| Direct Dependencies | commander, convert-source-map, fs-readdir-recursive, glob, lodash, make-dir, slash, source-map and chokidar |
| Keywords | 6to5, babel, es6, transpile, transpiler, babel-cli and compiler |
README
@babel/cli
Babel command line.
See our website @babel/cli for more information or the issues associated with this package.
Install
Using npm:
npm install --save-dev @babel/clior using yarn:
yarn add @babel/cli --devstyle-loader
Author: Tobias Koppers @sokra
Description: style loader module for webpack
Homepage: https://github.com/webpack-contrib/style-loader
| Created | over 7 years ago |
| Last Updated | 9 days ago |
| License | MIT |
| Maintainers | 8 |
| Releases | 60 |
| Direct Dependencies | loader-utils and schema-utils |
| Keywords | webpack |
This deploy contains the following PRs:
- Pin dependencies (Pin dependencies #326)
- Move some js packages to devDependencies (Move some js packages to devDependencies #327)
webpack-cli
Author: Unknown
Description: CLI for webpack & friends
Homepage: https://github.com/webpack/webpack-cli#readme
| Created | over 4 years ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 89 |
| Direct Dependencies | chalk, cross-spawn, enhanced-resolve, findup-sync, global-modules, import-local, interpret, loader-utils, supports-color, v8-compile-cache and yargs |
| Keywords | webpack, cli, scaffolding, module, bundler and web |
babel-plugin-module-resolver
Author: Tommy Leunen
Description: Module resolver plugin for Babel
Homepage: https://github.com/tleunen/babel-plugin-module-resolver#readme
| Created | over 3 years ago |
| Last Updated | 23 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 24 |
| Direct Dependencies | find-babel-config, glob, pkg-up, reselect and resolve |
| Keywords | babel, babel-plugin, module, resolver, alias, rewrite, resolve, rename, mapping, require and import |
README
babel-plugin-module-resolver
A Babel plugin to add a new resolver for your modules when compiling your code using Babel. This plugin allows you to add new "root" directories that contain your modules. It also allows you to setup a custom alias for directories, specific files, or even other npm modules.
Description
This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like ../../../../utils/my-utils, you can write utils/my-utils. It will allow you to work faster since you won't need to calculate how many levels of directory you have to go up before accessing the file.
// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';
// And it also work with require calls
// Use this:
const MyUtilFn = require('utils/MyUtilFn');
// Instead of that:
const MyUtilFn = require('../../../../utils/MyUtilFn');Getting started
Install the plugin
$ npm install --save-dev babel-plugin-module-resolver
Specify the plugin in your .babelrc with the custom root or alias. Here's an example:
{
"plugins": [
["module-resolver", {
"root": ["./src"],
"alias": {
"test": "./test",
"underscore": "lodash"
}
}]
]
}.babelrc.js version
Specify the plugin in your .babelrc.js file with the custom root or alias. Here's an example:
const plugins = [
[
require.resolve('babel-plugin-module-resolver'),
{
root: ["./src/"],
alias: {
"test": "./test"
}
}
]
];
Good example: // https://gist.github.com/nodkz/41e189ff22325a27fe6a5ca81df2cb91
Documentation
babel-plugin-module-resolver can be configured and controlled easily, check the documentation for more details
Are you a plugin author (e.g. IDE integration)? We have documented the exposed functions for use in your plugins!
ESLint plugin
If you're using ESLint, you should use eslint-plugin-import, and eslint-import-resolver-babel-module to remove falsy unresolved modules. If you want to have warnings when aliased modules are being imported by their relative paths, you can use eslint-plugin-module-resolver.
Editors autocompletion
- Atom: Uses atom-autocomplete-modules and enable the
babel-plugin-module-resolveroption. - IntelliJ/WebStorm: You can add custom resources root directories, make sure it matches what you have in this plugin.
- VS Code: Configure the path mapping in
jsconfig.json(tsconfig.jsonfor TypeScript), e.g.:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"test/*": ["test/*"],
"underscore": ["lodash"]
}
}
}License
MIT, see LICENSE.md for details.
Who is using babel-plugin-module-resolver ?
- Algolia: InstantSearch.js
- Airbnb: Lottie React Native
- AppDirect
- Callstack: React Native Paper
- Codility
- Eleme: Element
- Expo: Expo SDK
- FormidableLabs: Victory Native
- OpenCollective: OpenCollective
- React Community: React Native Maps
- Uber: Seer, react-vis
- Quasar Framework: Quasar
- Vuetify.js Vuetify
- Zeit: Next.js
- Zenika: Immutadot
Are you also using it? Send a PR!
Final bit of upkeep work (package warnings below are false positives due to re-organizing
package.json)