「React」环境搭建

作者: Floveluy | 来源:发表于2017-06-21 17:57 被阅读0次

    安装NPM和Node.js

    NodeJS官网

    安装完以后就会有最新版的Node.js和NPM

    创建App目录

    npm init
    

    生成的package.json 里,** scripts** 最重要,这里定义的参数会在** npm run **的时候进行调用。

    具体指南:阮一峰——npm scripts使用指南

     "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --devtool eval-source-map --progress --host 192.168.20.6 --colors --hot --content-base ./build --module-bind 'css=style!css' "
      },
    
    • --host 192.168.20.6 ,用于 webpack server 时所用的地址
    • --hot 热更新

    安装webpack

    app根目录下创建 webpack.config.js

    npm  install webpack --save-dev
    --save-dev 保存到当前文件夹
    
    webpack作用
    • 打包应用
    • 打包压缩静态文件(css,jsx)
    • 热更新
    安装 webpack-dev-server 热更新服务器

    详细看 webpack-dev-server 解读

    npm install --save-dev webpack-dev-server
    
    它将在当前文件夹下启动一个websocket服务,端口号为8080
    

    在package.json里我们只需要添加,这一段东西 (script有了,其实这一步没必要)

    devServer: {
      port: 8080 //设置监听端口(默认的就是8080)
      contentBase: "./build",//本地服务器所加载的页面所在的目录
      colors: true,//终端中输出结果为彩色
      historyApiFallback: true,//不跳转,用于开发单页面应用,依赖于HTML5 history API 设置为true点击链接还是指向index.html
    }
    

    安装React最新版本

    npm install --save-dev react react-dom
    
    安装Babel
    npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2
    
    专门用来热更新 React的react-hot-loader(最新版本)

    github地址react-hot-loader

    npm install --save react-hot-loader@next
    
    最重要的:新建.babelrc并配置
    // 新建.babelrc
    {
      "presets": [
        ["es2015", {"modules": false}],
           // webpack现在已经支持原生的import语句了, 并且将其运用在tree-shaking特性上
        "stage-2",
          // 规定JS运用的语言规范层级
          // Stage 2 是 "草案", 4 是 "已完成", 0 is "稻草人(strawman)"。
          // 详情查看 https://tc39.github.io/process-document/
        "react"
          // 转译React组件为JS代码
      ],
      "plugins": [
        "react-hot-loader/babel"
          // 开启react代码的模块热替换(HMR)
      ]
    }
    
    最终webpack.config.js配置
    const { resolve } = require('path');
    const webpack = require('webpack');
    module.exports = {
        context: __dirname,
        entry: [
            'react-hot-loader/patch',
            'webpack/hot/only-dev-server',
            './app/main.js'
        ],
        output: {
            path: resolve(__dirname, 'build'),//打包后的文件存放的地方
            filename: "bundle.js",//打包后输出文件的文件名
            publicPath: "/"
        },
        devServer: {
            contentBase: resolve(__dirname, 'build'),
            hot: true,
            publicPath: '/',
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    use: [
                        'babel-loader',
                    ],
                    exclude: /node_modules/
                },
                 {
                    test: /\.css$/,
                    use: [
                        'style-loader','css-loader'
                    ],
                    exclude: /node_modules/
                },
            ],
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(),
        ],
        devtool: "cheap-eval-source-map",
    };
    

    最终文件目录

    最终的文件目录结构,以后可以写个python脚本自动配置环境,奶奶的气死老子

    写main.js内容

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    import { AppContainer } from 'react-hot-loader';
    
    import Cpt from './component';
    
    const render =  (Component) => {
      ReactDOM.render(
        <AppContainer>
          <Component />
        </AppContainer>,
        document.getElementById('div1')
      )
    };
    render(Cpt);
    
    if(module.hot) {
      module.hot.accept( () => {
        render(Cpt)
      });
    }
    

    写component.js

    import React from 'react';
    
    const Cpt = () => (
      <div>
        <h1>我是盖世英雄!</h1>
      </div>
    );
    export default Cpt;
    

    最后

    npm run dev
    

    笔记来源和总结

    布蕾布蕾的webpack-react之webpack篇

    • 写个脚本可以一件配置
    • es6的react教程不多,不全,要看都看es6的。
    • module.hot.accept()这个函数的api改了,只有一个参数,是一个function

    相关文章

      网友评论

        本文标题:「React」环境搭建

        本文链接:https://www.haomeiwen.com/subject/hnstcxtx.html