内容简介:creat-react-app一直让我很舒服,不管是结合TS还是开发组件,突然有一天然后大家提倡升级webpack,然后就开启了如履薄冰的升级之路,天天跟便秘一样直到我看到了网红打包工具Parcel(确实孤陋寡闻了),小试一下,然后就又舒服了,然后自己尝试结合
一开始
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" }
广告
自己弄了一个简陋的脚手架
github: https://github.com/ZJBC/react...
npm: https://www.npmjs.com/package...
支持 组件开发 和 应用开发 两种模式, ️ ️
以上所述就是小编给大家介绍的《Parcel + react + ts 的脚手架》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。