Parcel,0配置打包typescript和react

最新推荐文章于 2023-01-09 22:11:09 发布

weixin_33991418

最新推荐文章于 2023-01-09 22:11:09 发布

阅读量286

点赞数

文章标签： javascript webpack json ViewUI

原文链接：https://juejin.im/post/5a35053ef265da431d3cc058

版权

Parcel是啥？

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

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

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

进入正题

现在很多人用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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>parcel-typescript-react-example</title>
  <link rel="stylesheet" type="text/css" href="./src/styles.css">
</head>
<body>
  <div id="root"></div>
  <script src="./src/index.tsx"></script>
</body>
</html>
复制代码

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';

class App extends React.Component{
  render(){
    return <div>Hello World!</div>;
  }
}

ReactDOM.render(<App/>, 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！啦

大家也可以到我的github-parcel-typescript-react-example 去 clone 代码。

欢迎start、issues~

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

以下是我的博客：

转载于:https://juejin.im/post/5a35053ef265da431d3cc058

weixin_33991418

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Parcel,0配置打包typescript和react

Parcel是啥？平常打包工具我们会去选择Webpack，但是我们都发现去使用webpack要么就去社区里找配置好的或者自己去看文档去配一大堆插件啊等等，但是我们在开发中还会遇到很多问题。有一句话说得好，配好了的Webpack就别动了。。因为下一步你继续配的话，你也不知道会发生什么。那么现在有一个真正的0配置打包工具，拿来就用岂不是美滋滋？这是官网的介绍，网址如下：Parcel进入正题...
复制链接

扫一扫