一开始

creat-react-app一直让我很舒服，不管是结合TS还是开发组件，突然有一天

npm run buildCreating an optimized production build...（预计10分钟通过）

然后大家提倡升级webpack，然后就开启了如履薄冰的升级之路，天天跟便秘一样

直到我看到了网红打包工具Parcel（确实孤陋寡闻了），小试一下，然后就又舒服了，然后自己尝试结合

初尝Parcel（全是参考官网）

1. 初始

npm install parcel-bundlerparcel index.html

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

npm install --save-dev parcel-bundlernpx parcel index.html

参考：

2. 结合React

npm install --save reactnpm install --save react-domnpm install --save-dev babel-preset-react

然后去package.json里边配置命令

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

依旧简单粗暴

参考：

3. 结合TypeScript

结合TS稍微麻烦一点，但是这跟parcel没关系，是TS自己事儿多

npm install --save-dev typescriptnpm install --save-dev @types/reactnpm 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"  }

广告

自己弄了一个简陋的脚手架

github:

支持 组件开发 和 应用开发 两种模式，?️?️