Parcel,0配置打包typescript和react-白红宇

Parcel是啥？

平常打包工具我们会去选择Webpack，但是我们都发现去使用webpack要么就去社区里找配置好的或者自己去看文档去配一大堆插件啊等等，但是我们在开发中还会遇到很多问题。有一句话说得好，配好了的Webpack就别动了。。因为下一步你继续配的话，你也不知道会发生什么。

那么现在有一个真正的0配置打包工具，拿来就用岂不是美滋滋？

这是官网的介绍，网址如下：

进入正题

现在很多人用React，并且还用上了Typescript！配置Webpack用tsc可太麻烦了。我们来看看Parcel是怎么做到的。

mkdir parcel-typescript-react-example

yarn init

mkdir src

tsc --init

接着我们需要yarn add 一些玩意儿:

yarn add parcel-bundler react react-dom typescript babel-preset-react @types/react @types/react-dom

接下来我们在根目录下创建index.html:

  
      
      
      parcel-typescript-react-example  
      
    
  复制代码

在src文件中我们创建 index.tsc 和 styes.css:

import * as React from 'react';import * as ReactDOM from 'react-dom';class App extends React.Component{  render(){    return 
    
     Hello World!
    
;  }}ReactDOM.render(
    , document.getElementById("root"));复制代码

CSS文件

* {  margin: 0;  padding: 0;}h1 {  color: red;  font-size: 18;}复制代码

我们的package.json如下：

{  "name": "parcel-react",  "version": "1.0.0",  "main": "src/index.tsx",  "license": "MIT",  "scripts": {    "start": "parcel index.html"  },  "dependencies": {    "@types/react": "^16.0.30",    "@types/react-dom": "^16.0.3",    "react": "^16.2.0",    "react-dom": "^16.2.0"  },  "devDependencies": {    "babel-preset-react": "^6.24.1",    "parcel-bundler": "^1.0.3",    "typescript": "^2.6.2"  }}复制代码

这样我们就可以打开终端-> cd parcel-typescript-react-example -> yarn start

静候佳音，然后locahost://1234就能看见火红的Hello World！啦

大家也可以到我的去 clone 代码。

欢迎start、issues~

也可以看看我github中的其他玩意儿！

以下是我的博客：