zoukankan      html  css  js  c++  java
  • React+webpack开发环境的搭建

    首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述.

    在上一章说过babel是一个javascript编辑器,在react项目中使用babel有以下两个目的:

    1:让代码支持ES6语法

    2:支持react的一些特性(例如JSX语法)

    针对以上两个特性,有如下两个presets可以完美解决

    babel-preset-es2015
    babel-preset-react

    之前我们说过webpack中的loader是用于文件特定格式的转换,那么在这里我们就需要安装Babel loader

    //安装babel-core核心模块和babel-loader
    npm install babel-core babel-loader --save-dev
    //安装ES6和React支持
    npm install babel-preset-es2015 babel-preset-react --save-dev

    babel安装完成后,接下来要做的当然是配置该插件了,让我们新建一个.babelrc的配置文件

    {
        "presets":["es2015","react"],
        "plugins":["transform-object-rest-spread"]
    }

    当然这些当然还不够,在写大型项目的时候一个统一的代码规范是必须的,这样有助于提高开发效率,在这里给大家推荐一下ESLint,他的强大之处和babel有点相似,提供一个完全可配置的检查规则,而且提供了非常多的第三方plugin,适合不同的开发场所,还能输出详细的错误信息,当然最6的一点是它支持ES6最新语法的同时还支持JSX语法,所以说他为React的绝配也不为过.

    一、安装ESLint loader

    同样为webpack添加这个loader 当然更准确的说是preloader 为什么这么说呢 代码规范检查肯定是要在代码编译之前来执行的,接下来就来安装这个loader,同时eslint也提供了完整的代码检查规则plugin我们就一同安装下

    npm install eslint eslint-loader --save-dev
    npm install eslint-plugin-import esling-plugin-react eslint-plugin-jsx-a11y --save-dev
    npm install eslint-config-airbnb --save-dev

    接下来我们来配置.eslintrc

    {
        "extends":"airbnb",//继承插件的检查规则
        "rules": {
            "comma-dangle": ["error","never"] //修改默认规则,数组最后一项不加逗号 例如([1,2,3,4,]修改为[1,2,3,4])
        }
    }

    babel和eslint配置安装完成后,接下来我们要做的是如何把他们结合在一起,首先我们新建一个webpack.config.js文件,我的配置信息如下:

    复制代码
    var path = require('path');
    var htmlWebpackPugins = require('html-webpack-plugin');
    var extracttext = require('extract-text-webpack-plugin');
    
    //定义常用路径
    var ROOT_PATH = path.resolve(__dirname);
    var APP_PATH = path.resolve(ROOT_PATH,'app');
    var BULID_PATH = path.resolve(ROOT_PATH,'build');
    module.exports = {
        entry:{
            app:path.resolve(ROOT_PATH,'index.jsx')
        },
        output:{
            path:BULID_PATH,
            filename:'bundle_[hash].js'
        },
        devtool:eval-source-map, //开启热更新
        devServer:{
            historyApiFallback:true,
            hot:true,
            inline:true,
            progress:true
        },
        module:{
            rules:[{
                test:/.css$/,
                use: extracttext.extract({
                  fallback: "style-loader",
                  use: "css-loader"
                }),
                test:/.jsx?$/,
                use:'babel-loader'
            }],
        },
        resolve:{
            ['.js','.jsx'] //添加拓展名
        },
        plugins:[
            new htmlWebpackPugins({
                title:'myfirstreact',
                minify:false
                // templateContent:function(){
                //     var html = "<div></div>";
                //     return html;
                // }
            }),
            new extracttext('styles.css')
        ]
    }
    复制代码

    配置文件写好以后开始书写项目的入口文件app.jsx,当然再次之前我们需要引入react库添加进去:

    npm install react-dom --save //因为生产环境需要 所以用--save

    最后便开始书写我们的app.jsx:

    复制代码
    import React from 'react';
    import ReactDOM from 'react-dom';
    function App(){
        return (
            <div>
                <h1>helslgggos react</h1>
            </div>
        )
    }
    const app = document.createElement('div');
    document.body.appendChild(app);
    复制代码

    至此我们的react基础环境就搭建成功了,执行命令npm run dev 可以看到酷炫的热加载效果  so cool ok今天的分享就到这里了

  • 相关阅读:
    zoj 3627#模拟#枚举
    Codeforces 432D Prefixes and Suffixes kmp
    hdu 4778 Gems Fight! 状压dp
    CodeForces 379D 暴力 枚举
    HDU 4022 stl multiset
    手动转一下田神的2048
    【ZOJ】3785 What day is that day? ——KMP 暴力打表找规律
    poj 3254 状压dp
    C++中运算符的优先级
    内存中的数据对齐
  • 原文地址:https://www.cnblogs.com/libin-1/p/6531984.html
Copyright © 2011-2022 走看看