React/AntDesgin 浏览器引入方式的脚手架搭建过程
2021-01-22 本文已影响0人
JohnYuCN
一、目标：
非生产环境中，能更方便的用“无Dom,无CSS”方式，进行前端开发！
二、搭建过程
- 脚本
~ $ mkdir mydev && cd ./mydev
mydev $ npm init -y
mydev $ yarn add react react-dom babel-core@old antd @ant-design/icons
- package.json的内容如下：
{
"name": "mydev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@ant-design/icons": "^4.4.0",
"antd": "^4.10.3",
"babel-core": "^5.8.38",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
三、测试页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 污染全局变量React和ReactDOM -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 以@bable-core@old引入bable5的版本 -->
<script src="./node_modules/babel-core/browser.min.js"></script>
<!-- 污染全局变量antd -->
<script src="./node_modules/antd/dist/antd.min.js"></script>
<!-- 污染全局变量icons -->
<script src="./node_modules/@ant-design/icons/dist/index.umd.js"></script>
<link rel="stylesheet" type="text/css" href="./node_modules/antd/dist/antd.min.css" />
</head>
<body>
<div id="app"></div>
<script type="text/babel">
function App(){
return (
<div>
<antd.Button type="primary">Hello</antd.Button>
<antd.Divider>Text</antd.Divider>
<antd.Rate allowHalf defaultValue={2.5}/>
<antd.Slider defaultValue={30} />
<icons.StarOutlined style={{fontSize:100}}/>
</div>
)
}
ReactDOM.render(<App/>,document.querySelector('#app'))
</script>
</body>
</html>
