Slog103_使用React框架进行前端开发14

ArthurSlog

SLog-103

Year·1

Guangzhou·China

October 29th 2018

个人网站：http://www.arthurslog.com

CSDN：https://blog.csdn.net/u010997452/article/list/1

GitHub：https://github.com/BlessedChild/ArthurSlog

NPM：https://www.npmjs.com/~arthurslog

掘金：https://juejin.im/user/59f2a424f265da432f305c66/posts

简书：https://www.jianshu.com/u/b9ebe10f0534

segmentfault：https://segmentfault.com/u/arthurslog/articles

知常曰明 不知常 妄作 凶

开发环境MacOS(Mojave 10.14 (18A391))

信息源

开始编码

整个工程更新为 四大前端-大后端 的结构

四大前端分为：客户端前端 -> 运营前端 -> 管理前端 -> 开发前端 (实现业务解耦)

大后端则承接了上述所有前端的后台交互

本次来开荒 ‘开发前端’

作为首尾的‘客户端前端’和‘开发前端’是 项目的必要选项

中间部分根据业务可以进行无限的解耦

ok 现在来配置‘开发前端’的环境

开发前端界面

一个下拉选择栏： 用于选择测试接口（就是在开发阶段 我们选择把数据传给后端的指定接口）

input输入框：根据上面的选择 这里输入的是准备发给后端的数据

测试按钮：当点击测试按钮的时候 会调用我们上面选中的函数 和 数据 向后端发起请求

结果显示框：显示后端返回的所有数据

Contract

sudo npm init -y

add webpack and webpack-cli as a dev dependency to our project

We installed webpack-cli so that we can use webpack in the command line

sudo npm install webpack webpack-cli --save-dev

sudo npm install react react-dom --save

In order for React to work, we need to install Babel alongside with it

We need Babel to transpile ES6 and JSX to ES5

So:

sudo npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

babel-core: Transforms ES6 code to ES5

babel-loader: Webpack helper to transpile code, given the the preset

babel-preset-env: Preset which helps babel to convert ES6, ES7 and ES8 code to ES5

babel-preset-react: Preset which Transforms JSX to JavaScript

The less-loader requires less as peerDependency

Thus you are able to control the versions accurately.

Use the css-loader or the raw-loader to turn it into a JS module and

the ExtractTextPlugin to extract it into a separate file

npm install less-loader less css-loader style-loader --save-dev

Chain the less-loader with the css-loader and the style-loader to immediately apply all styles to the DOM

Create an index.js file inside root of the /src folder

for now add the following line code inside it

This file will be the entry point to our app

./src/index.js

Create an index.html file inside root of the /src folder and add following code inside it

./src/index.html

Create a webpack.config.js in the root directory of the project

so that we can define rules for our loaders

Define the entry point and output directory of our app inside the webpack.config.js

In the above code

Webpack will bundle all of our JavaScript files into bundle.js file inside the /dist directory

Add some loaders inside this file, which will be responsible for loading and bundling the source files

Here babel-loader is used to load our JSX/JavaScript files and

less-loader is used to load all of the Less files to CSS files

css-loader is used to load and bundle all of the CSS files into one file and

style-loader will add all of the styles inside the style tag of the document

Create a .babelrc file inside root of the project directory with the following contents inside of it

./.babelrc

This file will tell babel which presets to use for transpiling the code

Here we are using two presets:

env: This preset is used to transpile the ES6/ES7/ES8 code to ES5

react: This preset is used to transpile JSX code to ES5

Add the following lines of code inside the script object of the package.json file as below:

Here i have used watch flag

So whenever there is a change in source files

Webpack will automatically compile all the source files

There are two modes in webpack 4

the production mode which produces optimized files ready for use in production

and development mode which produces easy to read code

and gives you best development experience

Html-webpack-plugin：

Now we also need to install html-webpack-plugin

this plugin generates an HTML file

injects the script inside the HTML file and writes this file to dist/index.html

sudo npm install html-webpack-plugin --save-dev

Here the value of template key is the file index.html

that we created earlier and it uses this file as a template

and generates new file named index.html inside the /dist folder

with the script injected

But this approach has a downside that you have to manually refresh the webpage

in order to see the changes you have made

To have webpack watch our changes and refresh webpage whenever any change

is made to our components, we can install webpack-dev-server

Webpack-dev-server:

npm install webpack-dev-server --save-dev

And change the package.json start script like below:

因为 有一些比较细节的地方 使用英文来理解比较准确

以上就是对开发环境的一个配置

这里是配置好的工程目录结构

工程文件已经上传至Github：https://github.com/BlessedChild/ArthurSlogStore

至此，完成了‘开发前端’的开发环境的初始化配置。

如果你喜欢我的文章 欢迎点赞 留言

谢谢