ArthurSlog

SLog-103

Year·1

Guangzhou·China

October 29th 2018

微信扫描二维码，关注我的公众号

知常曰明不知常妄作凶

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

信息源

开始编码

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

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

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

本次来开荒 ‘开发前端’

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

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

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

开发前端界面

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

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

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

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

Contract

开发模式，应该以降低开发成本为原则一个网页的基础是由 HTML，CSS 和 JS 构成的这些网页前端代码通过浏览器打开后能够直接运行当时为了降低开发成本现在我们写的大部分代码并不是原生的 HTML，CSS 和 JS而是基于它们扩展出来的更上层的语法所以在开发的过程中我们需要一个编译的过程 把上层代码编译为原生的 HTML，CSS 和 JS编译上层代码的工具有很多 比如使用babel工具 把ES6+的代码 编译为 ES5的代码使用Less工具 把less代码 编译为 css代码这些编译工具 成为了前端研发体系的一部分在工具的更上一层 渐渐出现了统一管理这些工具的超级工具比如 webpack通过 webpack工具 可以让所有工具协同工作 进一步降低开发的成本除了编译工具之外超级工具webpack 还一直处于发展之中在这个期间 出现了帮助开发人员 自动刷新浏览器的工具、压缩代码的工具、代码风格检测的工具、代码单元测试的工具、...发展到当前的时间点 类似webpack的超级工具渐渐的把所有工具集成在自己身上更进一步的降低开发的成本在发展的过程中 就是在经历着从不成熟到成熟所以纷乱、繁杂 始终相伴坚守 一切为降低成本 为原则大家一同共勉 前进复制代码

注释并不是冷冰冰的文字注释应该是一个充满温暖的地方 记载着无数不甘寂寞的灵魂所以 在我的注释里 不限制内容和格式 可以尽情的记录下任何信息最后 在构建生产环境代码的时候 再把注释信息进行屏蔽复制代码

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

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

webpack.config.js

module.exports = {    ...    module: {        rules: [{            test: /\.less$/,            use: [{                loader: "style-loader" // creates style nodes from JS strings            }, {                loader: "css-loader" // translates CSS into CommonJS            }, {                loader: "less-loader" // compiles Less to CSS            }]        }]    }};复制代码

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

console.log("Hello Arthur")复制代码

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

./src/index.html

    
        
        
        React Boilerplate    
        
    
复制代码

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

./webpack.config.js

const path = require("path");const config = {  entry: "./src/index.js",  output: {    path: path.join(__dirname, "/dist"),    filename: "bundle.js"  }};module.exports = config;复制代码

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

./webpcak.config.js

const path = require("path");const config = {  entry: "./src/index.js",  output: {    path: path.join(__dirname, "/dist"),    filename: "bundle.js"  },  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        },      },      {        test: /\.css$/,        use: ["style-loader", "css-loader", "less-loader"]      }    ]  }};module.exports = config;复制代码

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

{  "presets": ["@babel/preset-env", "@babel/preset-react"]}复制代码

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:

"start": "webpack --mode development --watch","build": "webpack --mode production"复制代码

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

Now we need to configure this plugin inside the webpack.config.js file

./webpcak.config.js

const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");const config = {  entry: "./src/index.js",  output: {    path: path.join(__dirname, "/dist"),    filename: "index-bundle.js"  },  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: ["babel-loader"]      },      {        test: /\.css$/,        use: ["style-loader", "css-loader"]      }    ]  },  plugins: [    new HtmlWebpackPlugin({      template: "./src/index.html"    })  ]};module.exports = config;复制代码

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:

"start": "webpack-dev-server --mode development --open --hot"复制代码

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

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

工程文件已经上传至

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

欢迎关注我的微信公众号 ArthurSlog

微信扫描二维码，关注我的公众号

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

谢谢