Parcel + React + TS 的脚手架

时间 2019-11-08

原文原文链接

一开始

creat-react-app一直让我很舒服，无论是结合TS仍是开发组件，忽然有一天css

npm run build

Creating an optimized production build...（预计10分钟经过）
复制代码

而后你们提倡升级webpack，而后就开启了如履薄冰的升级之路，每天跟便秘同样html

直到我看到了网红打包工具Parcel（确实孤陋寡闻了），小试一下，而后就又舒服了，而后本身尝试结合 React 和 TS 弄了个脚手架，node

初尝Parcel（全是参考官网）

1. 初始

npm install parcel-bundler
parcel index.html
复制代码

就是这么直接而且粗暴，localhost:1234就起来了，可是为了脚手架，仍是把parcel-bundle放到具体的项目里边react

npm install --save-dev parcel-bundler
npx parcel index.html
复制代码

参考： parceljs.org/getting_sta…webpack

2. 结合React

npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react
复制代码

而后去package.json里边配置命令git

"scripts": {
  "start": "npx parcel index.html"
}
复制代码

依旧简单粗暴github

参考： parceljs.org/recipes.htm…web

3. 结合TypeScript

结合TS稍微麻烦一点，可是这跟parcel不要紧，是TS本身事儿多typescript

npm install --save-dev typescript
npm install --save-dev @types/react
npm install --save-dev @types/react-dom
复制代码

而后按照惯例构建tsconfig.json文件就能够了，简单粗暴npm

个人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"
  }
复制代码