如何创建Simple React开发环境

适用于webpack 4.x

配置一个React的开发环境在我看来是比较麻烦的,需要比较多的配置。
写一篇博文统计一下,让自己记住,也希望帮助到别人:

  • webpack
  • webpack-cli
  • webpack-dev-server
  • react
  • react-dom
  • babel-loader@next
  • @babel/core
  • @babel/preset-react
  • style-loader
  • css-loader

这里可能是必须的,在初始化(npm init -y)之后使用npm i -D {name}去安装他们,然后在webpack.config.js文件中写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var debug = process.env.NODE_ENV !== "production";
const path = require('path')

module.exports = {
devtool: debug ? "inline-sourcemap" : null,
entry: './src/js/root.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
},
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
}
]
}
}

输入

1
webpack-dev-server --mode development --output-public-path dist --inline --hot

来启动测试服务器,就可以进行调试了。

工具推荐

Brackets 一个即时预览功能比较OK的文件编辑器

官网: http://brackets.io/

第三方介绍: http://caibaojian.com/brackets-editor.html

插件推荐:http://caibaojian.com/bracket-plugins.html

优点:即时预览能力强,代码提示较好

缺点:插件少,界面UI单调。


Axure 网页设计简单化软件

官网:https://www.axure.com/

汉化地址:http://www.iaxure.com/menupage/download.html

教程:https://www.axure.com.cn/category/axure/

优点:设计简单,样式修改简单

缺点:生成的网页不可直接使用,只可用于预览效果(不绝对)


Pinegrow 网页设计简单化软件

官网:https://pinegrow.com/

优点:精致小巧,功能强大,样式与内容修改简单

缺点:小众,付费


Parcel 简单的webpack脚手架

官网:https://parceljs.org/

优点:0配置,新手如果不想花费精力在烦人的配置上,可以使用

缺点:无配置,拓展难


Box Shadow 阴影效果在线调试

网站:http://tools.jb51.net/aideddesign/css3_boxshadow


CSS to React -> CSS样式转React样式

网站:https://staxmanade.com/CssToReact/


Browsersync -> 网页即时预览工具

官网:http://www.browsersync.cn/

更多

如果你想要找到更多对你开发有帮助的东西的话,去这里

https://zhuanlan.zhihu.com/p/29388576

0%