包详细信息

babel-preset-kyt-react

nytimes43.2kApache-2.01.3.20

An opinionated babel preset for react apps, best used with kyt.

babel, babel-preset, kyt, react

自述文件

kyt

Every sizable JavaScript web app needs a common foundation: a setup to build, run, test and lint your code. kyt is a toolkit that encapsulates and manages the configuration for web apps.

Read more about kyt in our blog post.

Dependency Status npm

Quick Start

  1. Install Node.js (v14.0+ required). On Mac, this is as simple as:
brew install nvm
nvm use
  1. yarn add kyt
  2. yarn kyt setup - This will set up your project with application and configuration files so that you can get started with kyt. Learn more about setup.
  3. yarn dev
  4. Check out http://localhost:3000

Features

  • Isomorphic rendering of JavaScript apps
  • Client and server hot-reloading in dev
  • Babel presets for general ES6 support and React
  • ESLint configuration and custom rules
  • Jest presets for running unit tests and CSS-in-JS linting
  • Optional client-only and server-only modes
  • Ability to override Webpack configuration from kyt.config.js

How it Works

kyt manages configuration for all aspects of development. It can be installed as a dependency into a new or existing project. kyt’s goal is to encapsulate only development tools, giving users the freedom to control their source directory and make important decisions about app architecture. kyt provides a command line interface for running all development tools.

Developers design their own architecture, choosing the tools they need for rendering, styling, and handling data.

For advanced use cases, kyt enables developers to add additional tools and configuration. See our config override instructions for details, and our recipes for examples.

Setting up a kyt project

kyt setup is a utility for bootstrapping kyt projects and installing starter-kyts. It can be run to create a new project or integrate kyt with an existing project.

See the kyt documentation for more details.

Command line

kyt includes a command line program with all the commands needed for development.

Running kyt setup includes these commands as scripts in your package.json:

yarn dev

Or you can run a command using yarn kyt {command}:

yarn kyt build

Here are the available commands:

  • dev starts a development environment
  • build compiles server and client code for production use
  • help shows commands and their documentation

See our CLI docs for further details.

Conventions

kyt follows a few simple conventions.

All projects must have the following structure:

src/
  client/
    index.js
    polyfills.js
  server/
    index.js
    polyfills.js

Each index.js file acts as the build entry.

(Note that server/index.js is not required if hasServer is false in config). (Note that client/index.js is not required if hasClient is false in config).

If you're setting up a new project see our full list of conventions.

Configuration

kyt allows you to specify options in a kyt.config.js file. See the kyt config docs for instructions.

kyt uses Webpack to compile src code. See our recipes for extending configuration.

kyt respects Babel config files defined at the root of user projects, and provides presets to provide opinionated configurations. (If no Babel config file is defined in the user project, babel-preset-kyt-core is used when compiling Webpack.)

starter-kyts

While kyt can be easily integrated into new or existing Node projects, it is even more powerful when used with a starter-kyt. A starter-kyt offers the benefits of a boilerplate while minimizing the amount of new tools to learn and maintain.

The kyt setup command installs any preconfigured starter-kyt git repository, adding additional dependencies and building a source directory.

How to build a starter-kyt

See additional info on how to build a starter-kyt.

How to contribute to kyt

Want to help? See details here

Need Help?

  1. Check our FAQ
  2. Submit an issue
  3. Check out our recipes for extending kyt

Changelog

Changelog

更新日志

kyt Changelog

Master

  • Fixes broken link to blog post on kyt
  • kyt-cli is removed, commands are merged back into kyt
  • New package: kyt-runtime. Using this ensures that you will be nagged about installing dependencies for your production install. This is useful when you are pruning node_modules for production in CI, which will remove kyt. Also, allows you make kyt a dev dependency.
  • New package: jest-preset-kyt-styled. Use this preset to run stylelint against your styled.js files. styled.js is the convention that the NYT uses to store css and styled exports from Pretty Lights.
  • SCSS support is now completely removed. stylelint-config-kyt still exists, but you will have to configure SCSS via modifyWebpackConfig.

1.0.0-alpha.3 10/23/17

  • Upgrades ESLint prettier and babel-eslint and makes it a peerDependency in eslint-config-kyt. 543
  • Fixes at-rule for Sass support in eslint-config-stylelint. 543

1.0.0-alpha.2 10/23/17

  • Upgrades ESLint dependencies in eslint-config-kyt. 540

1.0.0-alpha.1 10/20/17

  • Upgrades StyleLint and Prettier dependencies in stylelint-config-kyt, and adds a few new rules. 538 539

0.9.0 10/19/17

0.8.x-0.9.0 Migration guide.

  • Adds babel-preset-env to babel-preset-kyt-core/babel-preset-kyt-react to optimize the client and server build size and polyfilling. 531 532
  • Upgrades node-sass from 4.5.0 to 4.5.3 for Node 8 support.
  • Adds static asset support 518
  • Fixes static starter script order 524
  • Fixes asset/css fingerprinting bugs. 538
  • Adds a new eslint rule to restrict server file imports from outside of the src/server directory. 528

0.8.0 08/03/17

0.7.x-0.8.0 Migration guide.

  • Upgrades webpack to version 3.1.0
  • Upgrades jest to version 20.0.4
  • Adds jest test setup for global document and window

0.7.0 - 07/07/17

0.6.x-0.7.0 Migration guide.

0.6.1 - 06/28/17

  • Fixes handling of user postcss.config.js override #506.

0.6.0 - 06/07/17

0.5.x-0.6.0 Migration guide.

  • Upgrades webpack and loaders #482
  • Adds vendor bundling #487

0.5.5 - 05/02/17

  • Fixes bug in IE11, moves 'react-hot-loader/patch' after 'babel-polyfill'.#473
  • Fixes history api for static starter-kyt #468
  • Adds .ico to file stub #475
  • Adds KYT.EXECUTION_ENVIRONMENT global #465

0.5.4 - 04/10/17

Removes at-rule-no-unknown from stylelint configuration #462.

0.5.3 - 04/09/17

FEATURES

  • adds history api fallback to dev command for projects that use hasServer=false #457. Read more about how this affects the static starter kyt in the notes on implementation section.

BUGFIXES

  • fixes no-restricted-syntax error in linter #459. Read more here.

0.5.2 - 03/28/17

Adds Stylelint rule exceptions for common CSS Modules syntax, like :global, :local, etc. See more here.

0.5.1 - 03/27/17

Upgrades eslint to version 3.18 to get around an error. Read more here.

0.5.0 - 03/23/17

0.4.x-0.5.0 Migration guide.

BREAKING CHANGES

Webpack 2.2 upgrade

Upgraded to final version of Webpack 2.

StyleLint upgrade.

The upgrade involved updating the internal dependencies. Check out the changelog here.

ESLint upgrade.

The upgrade involved updating the internal dependencies. Check out the changelog here.

Jest 19 Upgrade

Upgrade from Jest 16 #422

FEATURES

  • Adds User survey link for modifyWebpackConfig #433
  • Adds starter-kyt versioning with npm #425
  • Adds additional functional tests #405
  • Adds source-map-support plugin #402

BUGFIXES

  • Removes transform runtime plugin from Jest Config #414
  • Replaces Ramda with Lodash #431
  • Adds missing require statments to recipe docs #415 and #410
  • Fixes bug with build on windows where old build directory wasn't deleted #429

0.4.1 (March 03, 2017)

FEATURES

Adds server side source maps #402. You can remove source-map-support from your projects if you registered it in your server side code.

BUGFIXES

Made src/public directory accessible in noServer=true projects #427.

Fixes autoprefixer bug where deprecated bugs were getting removed by the minimizer #390.

0.4.0 (February 13, 2017)

0.3.x-0.4.0 Migration guide.

BREAKING CHANGES

MONOREPO #330

kyt is now a monorepo with several packages

  1. kyt-cli - A globally installed package for project setup

  2. setup command now can create a new project directory with the -d flag. kyt-cli setup

  3. setup now supports copying devDependencies from starter-kyts
  4. setup accepts a kyt version flag to help with local development #343
  5. kyt-cli includes a list command which lists information about supported and recommended starter-kyts #340

  6. kyt-core - The kyt build and dev systems. Used as a project dependency

  7. setup is now deprecated as part of kyt-core. It can be found in kyt-cli

  8. start now runs the node server without a kyt wrapped command. This means kyt can be installed as a dev dependency

  9. kyt-utils - Shared kyt code. Not to be used independently

  10. starter-kyts - kyt-starter-static and kyt-starter-universal now live in the kyt repo.

e2e tests have been pulled to the top level and will be used to test all packages.

Babel Presets #347

kyt now supports having your own .babelrc file in your project.

kyt has two presets:

To update an existing kyt project:

  • If your project uses react you'll want to create a .babelrc that points to the react preset. This one should work.
  • If you currently make babel plugin or preset changes via modifyWebpackConfig, checkout out the updated recipe

Linter configs

kyt's linter configs are now packaged as separate configs #344 #380 To update: copy the new linter files into the root of your project. .eslintrc.json .stylelintrc.json

New Lint commands #339

Lint commands are now as follows:

  • kyt lint-script for JS
  • kyt lint-style for CSS/Sass
  • npm run lint runs both commands (installed by kyt-cli setup) kyt lint is deprecated

kyt start is deprecated

kyt-cli setup creates an npm run start command to run the server

FEATURES

  • Support babel plugins w/o prefix #303
  • Bootstrap scripts for local development #341 #377
  • kyt-cli now supports a fully interactive setup in addition to cli args. #378

Yarn Support

kyt-cli now supports setting up projects using yarn.#270

Tooling updates

  • Updated PostCSS loader #295
  • Add babel-plugin-transform-react-jsx-source to dev #179
  • Updated babel dependencies #311
  • Use babel polyfill rather than babel-transform-runtime #255
  • Updated linter dependencies #289

Bugfixes

  • Fixes bug where e2e tests were silently failing #326
  • Fixes bug where test command wasn't written if an npm default existed #293
  • Catch SIGINT for all commands #332
  • Fixes bug where Jest moduleNameMappers didn't match imports with specific Webpack loaders #363
  • Fixes bug where style-lint only supported one file name #383

0.3.0 (October 25, 2016)

BREAKING CHANGES

  • Upgrades Jest to version 16 #259 See Jest docs for information on latest updates.

  • Upgrades Webpack to v2.1.0-beta.25 #264 Check the recipes to see the latest syntax for common extensions. Additional info in Webpack's migration guide

FEATURES

0.2.2 (Sept 30, 2016)

  • Fixes linter Configuration for rule "eol-last" is invalid ESLint bug by upgrading all of the linter dependencies.

0.2.1 (Sept 23, 2016)

  • Fixes kyt lint-style bug where the base config file name was incorrect (#180).

0.2.0 (Sept 23, 2016)

BREAKING CHANGES

kyt test now uses Jest

See the new testing docs. Read more about Jest

If you've already written tests in Ava check out these code mods from mikenikles and dcousineau as a resource for upgrading.

support of other ESLint and StyleLint file types

.eslintrc --> .eslintrc.json .stylelintrc --> .stylelintrc.json

kyt adds these linter files to your project on setup. These files now reference base linter files in kyt to allow for easier upgrades. As always you can use these files to create your own overrides.

kyt's global variables are now in a KYT global object rather than process.env

BUG FIXES

  • Fixes bug where dev server child process was not killed after Webpack build error
  • Fixes bug where lint rule was deprecated and showing error

0.1.0 (Sept 12, 2016)

  • Initial public release