https://parceljs.org/getting-started/webapp/
https://hack.aragon.org/developers/tools/aragonui/getting-started
https://blog.jakoblind.no/react-parcel/
在git上发现了一个不错的UI（aragonUI），可以用Parcel手脚架快速搭建。
新整一个文件夹
npm init
npm install --save react
npm install --save react-dom
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-env
npm install --save-dev parcel-bundler
npm install --save @aragon/ui styled-components
npx copy-aragon-ui-assets ./public
（如果有依赖Bug的话，加 --legacy-peer-deps
=。= 路上踩了不少坑，比如 Parcel 官网上的用例是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Parcel App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="index.js"></script>
</body>
</html>
但是type=”module”会引发bug，这个issue在git上讨论了很多，找到了一个能行的办法：
还遇到了一个BUG，也在stackoverflow有讨论：
官网的写法是：
import ReactDOM from "react-dom";
import { App } from "./App";
const app = document.getElementById("app");
ReactDOM.render(<App />, app);
这个好像是今年才修改的，改的方法如下：
然后就整好了（以为很简单，但是还是踩坑了）
文件结构：
package.json
"scripts": {
"start": "parcel src\\index.html"
},
.babelrc
{
"presets": ["@babel/preset-react"]
}
src/App.js
import React from 'react'
import { Main } from '@aragon/ui'
export function App() {
return (
<Main>
<div>Your app goes here</div>
</Main>
)
}
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Papa's App</title>
</head>
<body>
<div id="app"></div>
<script defer src="index.js"></script>
</body>
</html>
src/index.js
import React from 'react';
import { App } from "./App";
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('app')).render(<App />);
1 条评论
咪啪 · 2022年11月10日 下午5:29
有空看看能怎么玩玩这个） 发现这个官网样例跟react 18好像不是很兼容，一堆bug