react环境搭建

最新推荐文章于 2024-05-24 14:35:39 发布

小肥喵大人

最新推荐文章于 2024-05-24 14:35:39 发布

阅读量6.1k

点赞数

分类专栏： web前端React.js

本文链接：https://blog.youkuaiyun.com/u013224660/article/details/51813102

版权

web前端React.js 专栏收录该内容

4 篇文章

订阅专栏

首先下载node.js

全局安装webpack

在终端执行下面代码将webpack安装到全局：npm install -g webpack，若是mac或者linux系统提示权限不足，请用sudo npm install -g webpack然后输入管理员密码执行.

创建一个空项目

使用终端进入当前创建项目所在文件夹初始化环境

// 初始化 package . json , 根据提示填写 package . json 的相关信息

$ npm init

// 下载 webpack 依赖 // - -save-dev 表示将依赖添加到 package . json 中的 'devDependencies' 对象中

$ npm install webpack - -save-dev

这个时候文件根目录会增加如下图所示两个文件

继续使用终端安装需要的模块组件

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

// babel 相关的模块

$ npm install babel-loader babel-preset-es2015 babel-preset-stage - 0 babel-preset-react babel-polyfill - -save-dev

// react 相关的模块

$ npm install react react-dom - -save

$ npm install css-loader style-loader --save-dev

在根目录新建文件webpack.config.js

var path = require('path');
module.exports = {
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    contentBase: './app',
    port: 8080
  },
  entry : [
    path.resolve(__dirname, 'app/main.jsx'),
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080'
  ],
  output : {
    path : path.resolve(__dirname, 'build'),
    filename:'bundle.js',
  },
  module: {
      loaders: [
        {
          test: /\.js[x]$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
              presets: ['es2015', 'stage-0', 'react']
          }
      },
      { test: /\.scss$/,loader: 'style!css!sass'},
    //  { test: /\.css$/,loader: 'style-loader!css-loader'},
    ]
  }
};

接着贴出各个文件内容

main.jsx

// 'use strict'
// var component = require("./component.js");
// document.body.appendChild(component());
var React = require('react');
var ReactDom = require('react-dom');
var Rstas = require('./Rstas.jsx');

//import './style.scss';

var Hello = React.createClass({
  render : function render(){
    return (
      <div>
        <span>
        Hello {this.props.name}
        </span>
        <Rstas name='newxxxxxxx' />
      </div>
    )
  }
});

ReactDom.render(<Hello name="World" />, document.getElementById('AppRoot'));

module.exports = Hello;

Ratas.jsx

var React = require('react');

var Rstas = React.createClass({
  render : function render(){
    return <div>xxxx {this.props.name}</div>;
  },
  componentDidMount : function(){
    console.log('.............');
    console.log('.............');
    console.log('.............');
    console.log('.............');
  }
});

module.exports = Rstas;

index.html

<!DOCTYPE html>
<html>
  <head>
    
    <meta charset="utf-8">
    <title>Document</title>
  </head>
  <body>
    <div id='AppRoot'></div>
    <script src="bundle.js"></script>
  </body>
</html>

切换终端，还是在当前的根目录中之行 npm run dev

打开浏览器进入 localhost:8080/index.html

参考文献:

https://www.zybuluo.com/brizer/note/281988 配置自定义命令

https://github.com/wangning0/Autumn_Ning_Blog/blob/master/blogs/3-12/webpack.md 参数说明

https://fakefish.github.io/react-webpack-cookbook/Getting-started.html webpack说明

https://zhuanlan.zhihu.com/leanreact react与编译打包环境