一步一步使用webpack+react+scss脚手架重构项目

时间  2019-11-11
标签 一步 使用 webpack+react+scss webpack react scss 脚手架 项目 栏目 React 繁體版
原文   原文链接

　　前几天作了一个项目：【node】记录项目的开始与完成——pipeline_kafka流式数据库管理项目；由于开发时间紧迫，浅略的使用了一下react，感受这个ui库很是的符合个人口味，如今趁着有空闲时间，将项目前端重构一番。这里面存在一些坑，都是深不见底的水坑，说多了都是泪水。。。好在顺利完成，如今在这里再一步一步重来一遍，和须要学习webpack的前端童鞋分享。javascript

准备

tips:文章最后可下载democss

一：目录html

　　

　　首先咱们要新建目录，前端

　　

　　新建app文件夹，它存放入口文件，component组件，java

　　新建static文件夹存放打包后的文件，node

　　新建webpack文件夹，存放的webpack配置文件。react

2、生成package.jsonwebpack

　　在当前目录打开cmd或者PowerShell或者终端，es6

　　

　　输入npm init 而后一直回车到执行完毕，package.json就滚到文件夹根目录下面了web

 三、安装webpack

　　shell输入 webpack i webpack --save 安装webpack

　　

　　我成功后的提示是这样的。

4、新建文件

　　在目录app中新建main.js,

　　在目录webpack中新建webpack的配置文件  webpack.config.js

　　在目录static中新建一个  index.html

　　在目录static中新建一个js目录

5、初步配置

　　首先写一下 /static/index.html这个文件，由于生成的文件目录在 /static/js文件夹里面，因此这里要预先引用打包后的文件，最后访问这个html文件就能够看到效果

　　

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>webpack_Demo</title>
    </head>
    <body>
        <div class="content">
        </div>
        <script src="./js/app.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>
复制代码

　　而后配置webpack.config.js：

　　刚开始咱们就配一个简单的入口和输出目录就能够了：　

复制代码 
var path = require("path");

module.exports = {
    entry:{　　//入口文件
        "app":path.join(__dirname,"../app/main.js")  //app对应生成的文件名
    },
    output:{
        path:path.join(__dirname,"../static/js/"),
        filename:"[name].js"   //这里[name]就是表示对应entry对象的name，而后生成的后戳是.js
    }
}
复制代码

 　如今咱们就能够简单的测试一下，在/app/main.js中随意写一些代码 ，好比alert(1)。

　　在shell中调用webpack测试，运行：

　　webpack --config ./webpack/webpack.config.js

 　　

　　成功后访问index.html，查看效果，若是报错，多是缺乏哪一个依赖包，安装后重复上面步骤。

　　这个时候文件目录就变成了:

　　 app.js就是打包后生成的文件。

　　如今咱们要把打包命令放在package.json里，由于每次编译都要运行那么长的命令，太痛苦了。在package.json简单的配置一个script就可使用npm run xxx运行了，编辑package.json：

　　

复制代码 
{
  "name": "web_pack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config ./webpack/webpack.config.js" //添加一个build 值是打包用到的命令
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^3.0.0"
  }
}
复制代码

如今在shell里运行 npm run build就能够编译了

到这一步，初步的配置就算是完成了，接下来配置一个webpack-dev-server，而后就能够配置react组件，生成项目了

 

配置webpack-dev-server 

　　什么是webpack-dev-server？ 

　　它是用来监控文件的修改事件，启动它的时候，会分配一个端口，指向当前的目录，一旦目录下文件被修改，它会通知浏览器自动刷新页面，省去了不断的按f5的烦恼。

　　在shell中安装，运行：

　　npm i webpack-dev-server --save-dev

　　安装成功后，运行：

　　node_modules/.bin/webpack-dev-server --config ./webpack/webpack.config.js --port 8089 --open

　　--config 是webpack配置文件目录，--port 是运行的端口号 

　　运行成功会在系统默认浏览器弹出一个窗口，这是一个选择文件夹的界面，咱们访问static，就能够访问到index.html了：

　　

　　这里须要注意的一点是，你还须要将index.html中的app.js引用改为http://localhost:8089/app.js，由于webpack-dev-server加载的是虚拟文件，目录在根目录下，因此须要修改这里。　　

<script src="http://localhost:8089/app.js" type="text/javascript" charset="utf-8"></script>

　　项目完成后再改为对应的路径。

　　修改完成，修改一下main.js中的js代码，再看看浏览器中页面是否改变。webpack-dev-server大体就配置好了，另外附上它的api地址：

　　webpack-dev-server

　最后再把命令配置到package.json中

复制代码 
{
  "name": "web_pack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "node_modules\.bin\webpack-dev-server --config ./webpack/webpack.config.js --port 8089 --open",　　//添加到test中 
    "build":"webpack --config ./webpack/webpack.config.js" 
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^3.0.0"
  }
}
复制代码

如今运行npm start test 就能够开始开发了。

 

配置react

　　到了这一步，咱们要开始配置react，首先仍是安装依赖包，编译jsx文件须要用到babel、babel-core、babel-loader、babel-preset-es201五、babel-preset-react、还有react本身的react、react-dom。安装他们:

　　npm i babel babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom --save

　　安装成功以后，先在main.js写一个demo

　　

复制代码 
var React = require("react");
var ReactDOM = require("react-dom");
ReactDOM.render(
        <div>
            <h1>welcome</h1>
        </div>
        ,document.querySelector(".content")
    );
复制代码

　　这里必定要用 ReactDOM.render 老的版本react.render会报语法错误。

配置babel-loader 

　　在webpack.config.js添加babel-loader用来解析jsx和es6的代码:

　　

复制代码 
var path = require("path");

module.exports = {
    entry:{
        "app":path.join(__dirname,"../app/main.js") //入口文件 name对应输出的[name]
    },
    output:{
        path:path.join(__dirname,"../static/js/"), //输出路径
        filename:"[name].js"        //输出app.js
    },
    module:{
        loader:[
            {
                test:/\.(js|jsx)$/,    //这是配置加载文件的规则 值是正则表达式 这里写的意思是.js .jsx结尾的文件加载loader
                loader:"babel-loader",
                exclude:/node_module/,        //这个目录不须要加载loader
                query:{
                    presets:["react","es2015"]        //加载loader的presets
                }
            }
        ]
    }
}
复制代码

　　配置了module下面的loaders。

　　而后npm run test 开启服务，测试一下代码是否能够运行。

　　顺利的话，这里应该能看到welcome了：

　　

 

　　如今的代码结构显然过于简单，下面咱们在app文件目录下新建两个目录 component 和 views。

　　先在component 文件夹下新建hello.jsx,写一些代码：

复制代码 
import React from "react";

class Hello extends React.Component{
    constructor(props){
        super(props);
        this.propTypes = {
            text:React.PropTypes.string
        }
    }
    render(){
        return <div className="hello">
                    hello <span>{this.props.text}</span>
                </div>
    }
}
module.exports = Hello;
复制代码

　　通常个人import 语法用来表示react组件或其余资源的引入，require语法用来表示js的引入，另外这里用的是es6的class语法。关于es6，在文章下面有浅略说明。

　　而后再views新建index.jsx，这里能够写主要的页面代码:

复制代码 
import React from 'react';
import Hello from "../component/hello.jsx"; //引入hello组件

class Index extends React.Component{
    render(){
        return <div className="index_container">
                    <Hello text="world"></Hello>
                </div>
    }
}

module.exports = Index;
复制代码

　最后main.js引入index，把index加入rander就能够看到效果了：

复制代码 
var React = require("react");
var ReactDOM = require("react-dom");

import Index from "./views/index.jsx"; //引入index
ReactDOM.render(
        <div>
            <Index></Index>　　//插入index视图
        </div>
        ,document.querySelector(".content")
    );
复制代码

查看效果：

到了这一步，基本的视图结构就完成了，接下来配置css的加载，基本和react的方式同样，加载对应的loader，解析对应的文件。

 

 

 

配置css：

　　视图解决了，如今咱们要解决css的引入问题，这里能够选择的就比较多 css、sass、less等均可以，我选择的是css，由于个人sass文件可使用ruby的sass编译，在编辑保存时已经自动编译成css了，我的以为这样管理起来更加方便。

　　首先仍是安装依赖,运行：

　　npm i css-loader file-loader style-loader url-loader --save-dev

　　file-loader url-loader 是用来编译图片资源的，它会将url()中的静态资源打包编译成base64格式，这里须要注意，不要在css中写找不到文件的路径，不然会报错编译失败。

　　安装完成后配置css-loader:

　　

复制代码 
var path = require("path");

module.exports = {
    entry:{
        "app":path.join(__dirname,"../app/main.js") //入口文件 name对应输出的[name]
    },
    output:{
        path:path.join(__dirname,"../static/js/"), //输出路径
        filename:"[name].js"        //输出app.js
    },
    module:{
        loaders:[
            {
                test:/\.(js|jsx)$/,    //这是配置加载文件的规则 值是正则表达式 这里写的意思是.js .jsx结尾的文件加载loader
                loader:"babel-loader",
                exclude:/node_module/,        //这个目录不须要加载loader
                query:{
                    presets:["react","es2015"]        //加载loader的presets
                }
            },
            {
                test:/\.css$/, //配置.css后戳的解析
                loader:"style-loader!css-loader"
            },
　　　　　　　{
　　　　　　　　　test:/\.(png|jpg)$/, //配置静态文件解析
　　　　　　　　　loader:"url-loader?limit=8192"
　　　　　　　}
        ]
    }
}
复制代码

注意style-loader必须写在css-loader前面，不然就会报错

　　配置完成，在hello.jsx引入个css瞧瞧（这里要重启一下test）：

　　

 引入的方法是

import "./hello.css";

引入成功，这样css就可使用了

 

项目结构

　　到目前为止 项目的结构是这样的：

　　

　　app中存放 组件（component）、视图（views）、入口文件 。

　　static中存放打包后的项目文件。

　　webpack中存放webpack的配置文件

　　建议将公共组件打包，好比建一个hello文件夹，里面存放hello.jsx和hello.css以及须要的插件、文档，这样它的多项目复用将变得很是方便，拷贝文件便可。

浅谈es6以及react中的小坑

　　es6的class关键字看起来很性感，实际上也只是整了个容，感受内在变化很少。与createClass差异不是很大，在react中每次生命组件都要继承React.Component。

　　好比上面的hello.jsx：

复制代码 
constructor(props){
        super(props);
        this.propTypes = {
            text:React.PropTypes.string
        }
    }
复制代码

　　这是构造函数，就是new xxx()调用的那个函数，这里为啥要super？ 这是个奇怪的写法，缘由是由于构造函数中访问不到this，须要调用super()才能顺利访问到this，这里我的尤其不解，虽然理解起来也不难，构造函数属于static方法，这里为啥不能和java同样的逻辑，构造函数只能访问类？

　　　this.propTypes  

　　　这个属性标明了组件中全部用到的props 而且能验证传入的值的正确性，感受组件有它很是有必要，建议写props不要少了这个属性。

　react 中this的坑

　　在hello.jsx组件上添加一个click事件，在事件中打印this：

复制代码 
class Hello extends React.Component{
    constructor(props){
        super(props);
        this.propTypes = {
            text:React.PropTypes.string
        }
    }
    render(){
        return <div className="hello" onClick={this.print}>
                    hello <span>{this.props.text}</span>
                </div>
    }
    print(){
        console.log("点击事件");
        console.log(this);
    }
}
复制代码

　　　会发现this的值既不是点击dom也不是class而是null:

　　

　　但是若是在静态文件中写React.createClass则不会出现null。

　　个人解决办法是在render中强制指定this为class：　

复制代码 
render(){
        this.print = this.print.bind(this);//绑定this到函数
        return <div className="hello" onClick={this.print}>
                    hello <span>{this.props.text}</span>
                </div>
    }
复制代码

查看官方文档解释是：

　　React.createClass有一个内置的魔术功能，能够自动绑定全部方法this。这对于在其余类中不用于此功能的JavaScript开发人员来讲可能会有点混乱，或者当从React转到其余类时可能会使人困惑。所以，咱们决定不将此内置到React的类模型中。若是须要，您仍然能够在构造函数中明确地预处理方法。
 
在遇到点击更改state时，必定会用到this。要注意this的指向问题

总结

　　前端就像是一只正当壮年的母鸡，今天下个蛋，明天下个蛋，是寡蛋是好蛋不知道，今天的蛋和明天的蛋尝起来味道也差很少。咱们就像是饲养员，负责给母鸡送吃的，下了蛋就要立刻负责收，不然要么就烂了、要么就孵出小鸡吃不了鸡蛋了。

　　那些层出不穷的框架，坏掉的框架、已经变的强大就很难驾驭的框架，这对前端来讲是一个考验。

相关资源

　　下载我最终作好的demo

　　 react文档翻译（快速入门）
　　
转载请注明出处（完）
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程