open-index/open-npm huggingface dataset:
npm package: @ptb/gatsby-react-router-scroll
Description: React Router scroll management forked from https://github.com/ytase/react-router-scroll for Gatsby
Author: Jimmy Jia
Latest version: 1.0.6

# gatsby-react-router-scroll

React Router scroll management forked from
https://github.com/ytase/react-router-scroll for Gatsby which itself was forked
to upgrade to RR v4 from Jimmy Jia's original scroll managment library for React
Router 2/3.
npm package: @ptbird/webpack3-react-development
Description: webpack3 react development
Author: postbird
Latest version: 0.0.1

> 这个开发开发环境只是为了能够快速的使用`webpack`来进行`react`的开发的入门使用，并不（完全）适用用生产环境的实际应用
> 因为没有考虑webpack的配置分离、生产环境的配置等很多东西，但是对于入门使用`webpack`进行`react`开发来说，没啥问题

<img src="./src/images/logo.svg" width="100px" style="margin:0 auto;display:block;">


## 一、问题


由于`react`的`create-react-app`本身不是使用`webpack`，而也不像`vue`给了一个非常好用的`vue-cli`

所以在使用`webpack`构建`react`的开发环境的时候遇到了很多问题。

尤其是网上很多都是`webpack1.x / webpack2.x`的指导，`webpack3.x`之后很多东西都发生了变化，而`babel`的更新也不建议使用`preset-es201X`这样的操作，建议直接使用`babel-preset-env`进行操作.


实际上我在自己配置的过程中遇到的最关键问题就是`babel`对`jsx`语法的编译，一开始总是无法编译，后来发现自己的包安装有问题。（这算是自己给自己挖的坑吧）


## 二、使用的依赖

`webpack`的开发环境就是对`webpack`的各种`loader`的配置及其他配置而已，因此还是很好理解的，如果熟悉`webpack`的话最好不过。

建议去看一下`webpack 3.x`的文档啥的。

### 依赖列表：

```javascript
"devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "html-withimg-loader": "^0.1.16",
    "less": "^3.0.0-alpha.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.8",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
    "url-loader": "^0.6.2",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.2"
  }
```

### 安装依赖：

安装完成后，可以直接通过`npm install 安装依赖`

```bash
npm install 
```

## 四、源码



地址：
- https://github.com/postbird/webpack-react-development

## 五、最早发布于博文：

- http://www.ptbird.cn/webpack3-react-development.html
npm package: @ptc-org/nestjs-query-core
Description: Base query package
Author: doug-martin
Latest version: 9.4.0

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@ptc-org/nestjs-query-core.svg)](https://www.npmjs.org/package/@ptc-org/nestjs-query-core)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/core/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/core/package.json)

# `@ptc-org/nestjs-query-core`

Core package that contains interfaces for types used by [`@ptc-org/nestjs-query-graphql`](../query-graphql)
and [`@ptc-org/nestjs-query-typeorm`](../query-typeorm)

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Docs

* [Nestjs-query Docs](https://tripss.github.io/nestjs-query/docs/introduction/getting-started)
npm package: @ptc-org/nestjs-query-graphql
Description: Nestjs graphql query adapter
Author: doug-martin
Latest version: 9.4.0

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@ptc-org/nestjs-query-graphql.svg)](https://www.npmjs.org/package/@ptc-org/nestjs-query-graphql)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/query-graphql/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/query-graphql/package.json)

# `@ptc-org/nestjs-query-graphql`

This package provides a code first implementation of graphql CRUD endpoints. It is built on top of
of [nestjs](https://nestjs.com/).

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@ptc-org/nestjs-query-graphql` package checkout
the [Getting Started](https://tripss.github.io/nestjs-query/docs/graphql/getting-started) docs.
npm package: @ptc-org/nestjs-query-mongoose
Description: Mongoose adapter for @ptc-org/nestjs-query-core
Author: doug-martin
Latest version: 9.4.0

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@nestjs-query/query-mongoose.svg)](https://www.npmjs.org/package/@nestjs-query/query-mongoose)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/query-mongoose/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/query-mongoose/package.json)

# `@nestjs-query/query-mongoose`

The `query-mongoose` package that provides an implementation of `@ptc-org/nestjs-query-core` `QueryService`, built on
top of of [nestjs](https://nestjs.com/) and [mongoose](https://mongoosejs.com/).

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@nestjs-query/query-mongoose` package checkout
the [Getting Started](https://tripss.github.io/nestjs-query/docs/persistence/mongoose/getting-started) docs.
npm package: @ptc-org/nestjs-query-sequelize
Description: Sequelize adapter for @ptc-org/nestjs-query-core
Author: doug-martin
Latest version: 9.4.0

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@ptc-org/nestjs-query-sequelize.svg)](https://www.npmjs.org/package/@ptc-org/nestjs-query-sequelize)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/query-sequelize/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/query-sequelize/package.json)

# `@ptc-org/nestjs-query-sequelize`

The `query-sequelize` package that provides an implementation of `@ptc-org/nestjs-query-core` `QueryService`, built on
top of of [nestjs](https://nestjs.com/) and [sequelize](https://sequelize.org/).

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@ptc-org/nestjs-query-sequelize` package checkout
the [Getting Started](https://tripss.github.io/nestjs-query/docs/sequelize/getting-started) docs.
npm package: @ptc-org/nestjs-query-typegoose
Description: Typegoose adapter for @ptc-org/nestjs-query-core
Author: john mcinall
Latest version: 9.4.0

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@ptc-org/nestjs-query-typeorm.svg)](https://www.npmjs.org/package/@ptc-org/nestjs-query-typeorm)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/query-typegoose/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/query-typegoose/package.json)

# `@ptc-org/nestjs-query-typeorm`

The `query-typegoose` package that provides an implementation of `@ptc-org/nestjs-query-core` `QueryService`, built on
top of of [nestjs](https://nestjs.com/) and [typegoose](https://github.com/typegoose/typegoose).

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@nestjs-query/query-typegoose` package checkout
the [Getting Started](https://tripss.github.io/nestjs-query/docs/persistence/typegoose/getting-started) docs.
npm package: @ptc-org/nestjs-query-typeorm
Description: Typeorm adapter for @ptc-org/nestjs-query-core
Author: doug-martin
Latest version: 9.4.0

<p align="center">
  <a href="https://tripss.github.io/nestjs-query" target="blank"><img src="https://tripss.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@ptc-org/nestjs-query-typeorm.svg)](https://www.npmjs.org/package/@ptc-org/nestjs-query-graphql)
[![Test](https://github.com/tripss/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/tripss/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://codecov.io/gh/TriPSs/nestjs-query/branch/master/graph/badge.svg?token=29EX71ID2P)](https://codecov.io/gh/TriPSs/nestjs-query)
[![Known Vulnerabilities](https://snyk.io/test/github/tripss/nestjs-query/badge.svg?targetFile=packages/query-typeorm/package.json)](https://snyk.io/test/github/tripss/nestjs-query?targetFile=packages/query-typeorm/package.json)

# `@ptc-org/nestjs-query-typeorm`

This package provides a code first implementation of graphql CRUD endpoints. It is built on top of
of [nestjs](https://nestjs.com/).

## Installation

[Install Guide](https://tripss.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@ptc-org/nestjs-query-typeorm` package checkout
the [Getting Started](https://tripss.github.io/nestjs-query/docs/persistence/typeorm/getting-started) docs.