},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-plugin-import": "^1.9.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"eslint": "^5.7.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-react": "^7.11.1",
"html-webpack-plugin": "^3.2.0",
"react": "^16.5.2",
"react-dev-utils": "^6.0.5",
"react-dom": "^16.5.2",
"react-router-dom": "^4.3.1",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
当然也可以使用npm install手动单独下载对应依赖,但有些依赖必须指定版本,否则会有冲突。在项目目录下创建如下文件夹
src用于放置react组件,public用于放置静态文件,dist放置编译目标文件,config用于放置配置文件
3.配置webpack
在config中创建webpack配置文件,任意命名,我这里命名为webpack.config.js。创建用于控制路径的配置文件,我这里命名为paths.js
'use strict';
const path = require('path');
const fs = require('fs');
const appDirectory = fs.realpathSync(process.cwd());
const resolveAppPath = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
mainJs:resolveAppPath('src/main.js'),
html:resolveAppPath('public/index.html'),
buildPath:resolveAppPath('dist'),
};
paths.js文件用于配置在编译时可能用到的一些路径,并将其转化为绝对路径,这里导入了三个路径
1.mainJs:入口文件,可以理解为我们的静态页面在未编译时所引入的唯一js文件,这也是react官方推荐的模式
2.html:静态页面路径
3.biildPath:编译完成后的文件应该放置的目录
const path = require('path');
const paths = require('./paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: paths.mainJs,
output: {
filename: 'bundle-hash.js',
path: paths.buildPath
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},{
test: /.css$/,
use: 'style-loader', 'css-loader'
},{
test: /.(png|jpg|jpeg|gif)$/,
use: 'url-loader'
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: paths.html,
inject: true
})
]
};
entry选项用于指定入口文件,可以理解为我们的静态页面在未编译时所引入的唯一js文件
output选项用于指定编译结果,filename设置编译完成的文件名称,使用hash将编译完成的js文件加上哈希码,防止浏览器缓存,path指定js文件放置目录
需要注意的是除了使用babel-loader对js文件的语法进行转换之外,还要用style-loader和css-loader对css文件进行转换,否则在使用antd的样式时会报错,使用HtmlWebpackPlugin在编译时往html文件中插入编译后的js文件
对于babel的配置主要有两种方式,一种是在项目根目录下创建**.babelrc**文件
{
"presets": [
"es2015",
"react"
],
"plugins": ["transform-class-properties",["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}]]
}
加入transform-class-properties插件可以使用属性初始化器语法,不用在构造函数中定义属性,同时配置babel-plugin-import,实现antd的按需引入
4.测试
在src目录下新建page目录,创建index.js文件,编写一个测试组件,这里用antd官方文档上的演示代码
import React from 'react';
import { Menu, Icon, Switch } from 'antd';
const { SubMenu } = Menu;
class Sider extends React.Component {
state = {
mode: 'inline',
theme: 'light',
}
changeMode = (value) => {
this.setState({
mode: value ? 'vertical' : 'inline',
});
}
changeTheme = (value) => {
this.setState({
theme: value ? 'dark' : 'light',
});
}
render() {
return (
Change Mode
<span className="ant-divider" style={{ margin: '0 1em' }} />
Change Theme
style={{ width: 256 }}
defaultSelectedKeys={'1'}
defaultOpenKeys={'sub1'}
mode={this.state.mode}
theme={this.state.theme}
<Menu.Item key="1">
Navigation One
</Menu.Item>
<Menu.Item key="2">
Navigation Two
</Menu.Item>
<SubMenu key="sub1" title={Navigation Three}>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub2" title={Navigation Four}>
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
);
}
}
export default Sider;
创建router文件夹,在其中创建router.js文件,编写路由
最后
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。
