At the beginning

Creat-react-app had always been very comfortable for me, whether it was combining TS or developing components, and suddenly one day

npm run build Creating an optimized production build... (Expected to pass in 10 minutes)Copy the code

Then everyone advocated upgrading webpack, and it was like walking on thin ice to upgrade every day like constipation

Until I saw the React and TS package Parcel, tried it, and got comfortable again. Then I tried the React and TS scaffolding myself.

Sample Parcel for the first time

1. The initial

npm install parcel-bundler
parcel index.html
Copy the code

As straightforward and brutal as that, localhost:1234 is up, but for the sake of scaffolding, parcel-bundle is in the concrete project

npm install --save-dev parcel-bundler
npx parcel index.html
Copy the code

Reference: parceljs.org/getting_sta…

2. Combined with the React

npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react
Copy the code

Then go to package.json to configure the command

"scripts": {
  "start": "npx parcel index.html"
}
Copy the code

Still simple and crude

Reference: parceljs.org/recipes.htm…

3. Combining with the TypeScript

Combining TS is a bit more complicated, but it’s not parcel, it’s TS

npm install --save-dev typescript
npm install --save-dev @types/react
npm install --save-dev @types/react-dom
Copy the code

Then you build the tsconfig.json file as usual, simple and crude

My package. Json

Added tsLint and sass+postCSS

  "dependencies": {
    "react": "^ 16.2.0"."react-dom": "^ 16.2.0",},"devDependencies": {
    "sass": "^ 1.15.2"."autoprefixer": "^ 9.4.3"."postcss-modules": "^ 1.4.1." "."@types/react-dom": "^ 16.0.3"."@types/node": "^ 10.12.18"."@types/react": "^ 16.7.18"."babel-preset-react": "^ 6.24.1"."parcel-bundler": "^ 1.0.3"."tslint": "^ 5.12.0"."tslint-config-airbnb": "^ 5.11.1"."typescript": "^ 3.2.2." "
  }
Copy the code

advertising

He made a crude scaffold of his own

Making: github.com/ZJBC/react-… NPM: www.npmjs.com/package/rea…

Supports component development and application development modes: 🦀️🦀️