好吧，其实没有标题写的那么夸张，也就是个HelloWorld…这里记录一下今天的研究历程
本文所用到的代码已上传github，clone下来之后进入项目根目录，控制台输入
npm install
等待包安装完成后，输入
npm start
查看效果
Ant Design 是蚂蚁金服体验技术中心出品的一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。其提供了完整的设计资源，也提供了一套完整的基于React的前端组件。
使用Webpack + React 进行项目构建。
- webpack
- webpack-dev-server
- react
- react-dom
- babel
- babel-preset-react
- babel-preset-es2015
- babel-loader
- babel-core
- css-loader
- style-loader
- 首先全局安装webpack和webpack-dev-server，关于webpack的介绍可以参考：http://webpack.github.io/docs/what-is-webpack.html
npm install -g webpack webpack-dev-server
- 在项目文件夹路径下，初始化npm项目
npm init -y
- 安装webpack和webpack-dev-server到项目中
npm install webpack webpack-dev-server --save-dev
- 安装react和babel的依赖包
npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
- 安装剩下的webpack的loader
npm install css-loader style-loader --save-dev
在项目的根目录新建webpack.config.js，并添加以下内容
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
}在项目根目录打开package.json，在scripts内插入
"build": "webpack",
"start": "webpack-dev-server --devtool eval --progress --colors --hot"构建完成后的package.json的scripts
// 省略
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --inline --hot"
},
// 省略在项目根目录新建.babelrc，输入内容
{
presets:[
"es2015",
"react"
],
plugins:[]
}<!--index.html-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
</body>
<script src="bundle.js"></script>
</html>// index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>HelloWorld!</h1>,
document.getElementById("root")
);在控制台输入npm start，启动项目。项目默认会在8080端口启动。启动完成后，可以在浏览器上输入http://localhost:8080查看页面。
页面使用了webpack-dev-server构建，支持热部署。我们可以修改index.js的源码，并不主动刷新的查看浏览器的显示。
- 安装
Ant Design组件库
npm install antd --save-dev
- 安装
Ant Design按需加载所需要的babel插件babel-plugin-import
npm install babel-plugin-import --save-dev
- 重新编辑
.babelrc，修改plugins的内容
{
presets:[
"es2015",
"react"
],
plugins:[
["import", {libraryName: "antd", style: "css"}]
]
}修改index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {DatePicker, message} from 'antd';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: ""
}
}
handleChange(date) {
message.info("您选择的日期是" + date.toString());
this.setState({date: date.toString()})
}
render() {
return (
<div style={{width: 200, height: 200, margin: '100px auto'}}>
<DatePicker onChange={value => this.handleChange(value)}/>
<div>
<p>当期日期是: {this.state.date}</p>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("root")
);控制台输入
npm start
等待编译完成后，查看浏览器
大功告成！
可以使用npm run build对项目进行打包。
可以配置loader来分文件处理js，css，压缩图片等。
我的感想是前端的世界发展的真是太快了…前几年感觉还是茹毛饮血的时代，现在已经有各种自动化工具来帮助开发者辅助开发。能在这个时代使用这些便捷的工具进行开发，真是太棒了！