Parcel + react + ts 的脚手架

chavesgu 发布于2019-08-26 13:31 / 1051人阅读

摘要：一开始一直让我很舒服，不管是结合还是开发组件，突然有一天预计分钟通过然后大家提倡升级，然后就开启了如履薄冰的升级之路，天天跟便秘一样直到我看到了网红打包工具确实孤陋寡闻了，小试一下，然后就又舒服了，然后自己尝试结合和弄了个脚手架，初尝全

一开始

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...

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108970.html

一篇文章学会 TypeScript

摘要：接下来来看一段代码示例语法与语言比较当类型不对的时候，会提示错误编译后语法联想大致可以把它看成是加了类型系统的。一篇文章学会 TypeScript （内部分享标题：TypeScript 基础）这篇文章是我在公司前端小组内部的演讲分享稿，目的是教会大家使用 TypeScript，这篇文章虽然标着基础，但我指的基础是学完后就能够胜任 TypeScript 的开发工作。从我分享完的效果来...

itvincent 2019-08-23 17:54 评论0 收藏0
精读《如何编译前端项目与组件》

摘要：历史上由于是作为的替代品出现，当时要解决的问题是处理浏览器兼容问题，打包或，做一些公共资源替换，雪碧图等，最后可以顺带合并到一个文件，但模块化功能远远比弱，基本上只能合并，但不能理解模块概念。 1 引言说到前端编译方案，也就是如何打包项目，如何编译组件，可选方案有很多，比如：通过 webpack / parcel / gulp 构建项目。通过 parcel / gulp / b...

jiekechoo 2019-08-23 14:52 评论0 收藏0
开发一个 Parcel-vue 脚手架工具

摘要：在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。思路要开发脚手架，首先要理清思路，脚手架是如何工作的我们可以借鉴的基本思路。本地测试以上是我写的一个的脚手架源码，点击即可查看，欢迎前言像我们熟悉的 vue-cli，create-react-app 等脚手架，只需要输入简单的命令 vue init webpack project，即可快速帮我们生成一个初始项目。...

xiaochao 2019-08-26 12:21 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0