Web前端开发环境的构建

开始之前


    
    先准备一下nodejs,npm(用于安装一些js包,npm一般是nodejs自带的包管理工具),通过官网下载即可

构建工具


    先选择一个本地放置项目的目录,执行

npm init


    进入项目目录,此时该目录下会有一个package.json的文件储存着项目中包的信息,
    通过npm我们可以下载一些构建工具

webpack,webpack-cli

npm install webpack webpack-cli -g


    webpack是用于打包文件的工具,可以很方便的帮我们整合资源(js,image,css...etc),接着安装babel(babel在高版本有了一些变化,我在使用babel 7.4.0时一些包换了名字,比如babel-preset-env应该替换为@babel/preset-env)

@babel/core babel-loader @babel/preset-env @babel/preset-react

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


    
    @babel/core是使用babel的必需品,babel-loader用于babel和webpack生成js文件,
    @babel/preset-env用于使浏览器兼容新版本js标准,
    @babel/preset-react用于将jsx转换为js代码,这些工具之后会在webpack.config.js里用到

react react-dom

npm install react react-dom --save


    
    这两个包我们主要用于构建react应用,
    react是React应用的核心,react-dom主要是用于操作React的虚拟dom,
    安装上我们要将其保存到包的依赖中,--save参数正是用于此

webpack-dev-server (Optional)

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


    
    虽然webpack已经全局安装过,但是webpack-dev-server需要使用webapck,
    所以我们也需要把他添加到npm二进制依赖中,这一步也是可选的,
    这里使用webpack-dev-server就是为了看到程序的结果,我们也可用nginx等web服务器代替

构建配置


    
    至此我们已经差不多完成了工具的安装,接下来我们需要书写一些配置文件,
    使得工具能够被正确的使用,
    首先我们需要书写webpack的入口文件webpack.config.js放置于项目根目录下

let path = require('path');
module.exports = {
    //程序入口文件
    entry:"./src/index.js",
    //编译输出
    output: {
        path:path.resolve(__dirname,"dist"),
        filename:"index.js"
    },
    //如何在打包时进行中间处理
    //test要是正则表达式对象,写字符串会有意想不到的错误
    module:{
        rules:[
            {
                test:/\.jsx?$/,
                exclude:path.resolve(__dirname,"node_modules"),
                include:path.resolve(__dirname,"src"),
                use:[
                    {
                        loader:"babel-loader",
                        options:{
                            presets:["@babel/preset-env","@babel/preset-react"]
                        }
                    }
                ]
            }
        ]
    },
    //设置成生产环境
    mode:"production",
    //设置webpack-dev-server
    devServer:{
        //文件根目录
        contentBase:path.resolve(__dirname,"dist"),
        //监听端口
        port:8080,
        //热更新
        hot:true,
        //自动打开浏览器
        open:true,
    },
    performance:{
        hints:false,
    }
};


    
    等到下一步构建应用写完src/index.js,我们就可以通过执行webpack,会在dist得到产出文件

webpack

构建应用


    
    这里只是说明如何搭建,故只需要说明我们的React确实能够使用,
    我们在编译文件输出目录dist下,新建index.html

<!DOCTYPE html>
<html>
    <head>
        <title>React</title>
    </head>
    <body>
        <div id="container"></div>
    </body>
    <script type="text/javascript" src="index.js">
    </script>
</html>


    继续编写我们的src/index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

class Hello extends Component {
    constructor() {
        super();
    }
    render() {
        return <h1>Hello,React!</h1>;
    }
}

ReactDOM.render(<Hello/>,document.getElementById("container"));


    这里我们可以执行webpack,看到dist的输出了

webpack


    
    我们可以继续修改package.json来使用webpack-dev-server(在scripts里加入添加"dev"那一行)

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.4.5",
        "@babel/preset-env": "^7.4.5",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.6",
        "webpack": "^4.35.0",
        "webpack-dev-server": "^3.7.2"
    },
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    }
}

执行npm run dev就可以自动打开浏览器看到输出了

一切过往,皆是序章.