react环境搭建

来源：互联网发布：阿桑奇斯诺登知乎编辑：程序博客网时间：2024/06/15 21:08

首先下载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 installwebpack--save-dev

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

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

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

// babel 相关的模块

$ npm installbabel-loaderbabel-preset-es2015 babel-preset-stage-0babel-preset-react babel-polyfill --save-dev

// react 相关的模块

$ npm installreactreact-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与编译打包环境

0 0