Parcel + react + ts 的脚手架

2023年4月14日 233次阅读来源: yurt

一开始

creat-react-app一直让我很惬意，不管是连系TS照样开辟组件，倏忽有一天

npm run build

Creating an optimized production build...（估计10分钟经由过程）

然后人人首倡晋级webpack，然后就开启了小心翼翼的晋级之路，每天跟便秘一样

直到我看到了网红打包东西Parcel（确切目光如豆了），小试一下，然后就又惬意了，然后本身尝试连系
React 和 TS 弄了个脚手架，

初尝Parcel（满是参考官网）

1. 初始

npm install parcel-bundler
parcel index.html

就是这么直接而且粗犷，localhost:1234就起来了，然则为了脚手架，照样把parcel-bundle放到详细的项目里边

npm install --save-dev parcel-bundler
npx parcel index.html

参考： https://parceljs.org/getting_…

2. 连系React

npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react

然后去package.json里边设置敕令

"scripts": {
  "start": "npx parcel index.html"
}

照旧简朴粗犷

参考： https://parceljs.org/recipes….

3. 连系TypeScript

连系TS轻微贫苦一点，然则这跟parcel没紧要，是TS本身事儿多

npm install --save-dev typescript
npm install --save-dev @types/react
npm install --save-dev @types/react-dom

然后根据通例构建tsconfig.json文件就能够了，简朴粗犷

我的package.json

趁便加了tslint和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"
  }

算法网