React+Webpack+Babel开发环境的搭建

最新推荐文章于 2024-03-22 13:26:39 发布

_Ricky_

最新推荐文章于 2024-03-22 13:26:39 发布

阅读量1.6k

点赞数 1

文章标签： react node.js webpack babel 开发环境搭建

本文链接：https://blog.csdn.net/JavaReact/article/details/55102565

版权

1、首先下载Node.js,并配置好环境变量

nodejs下载链接：https://nodejs.org/en/download/

2、安装全局包

由于“墙”的原因，建议使用淘宝的npm镜像，下载：npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install babel -g
$ cnpm install webpack -g
$ cnpm install webpack-dev-server -g

3、创建一个空项目

安装好后创建一个名叫 learn-webpack 的项目并进入该项目文件夹，

mkdir learn-webpack && cd learn-webpack 通过编辑器找到刚才创建的项目。

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

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

$ cnpm init

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

$ cnpm install webpack --save-dev

下载完后，根目录会增加如下两个文件

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

$ cnpm install webpack-dev-server --save-dev

babel 相关的模块

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

react 相关的模块

$ cnpm install react-dom --save

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

var path = require('path');  
module.exports = {  
  devServer: {  
    historyApiFallback: true,  
    hot: true,  
    inline: true,  
    progress: true,  
    contentBase: './app',  
    port: 8090
  },  
  entry : [  
    path.resolve(__dirname, 'app/main.jsx'),  
    'webpack/hot/dev-server',  
    'webpack-dev-server/client?http://localhost:8090'
  ],  
  output : {  
    path : path.resolve(__dirname, 'build'),  
    filename:'bundle.js',  
		 },  
  module: {  
      loaders: [  
        {  
          test: /\.js[x]$/,  
          exclude: /node_modules/,  
          loader: 'babel',  
          query: {  
              presets: ['es2015', 'stage-1', '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');  

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>

手动创建babel的配置文件（规范名称“.babelrc”）

{
  "presets": [
    "es2015",
    "react",
  ],
  "plugins": []
}

切换到终端，还是在之前的根目录输入$ cnpm run dev

没有报错后，切换到浏览器在地址栏输入 localhost:8090.

全部步骤都在这，在学习时出现别的错误百度一下基本都能解决。

_Ricky_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React+Webpack+Babel开发环境的搭建

1、首先，确定你已经了解了react是干什么的，对react还不了解的请移步这里：react快速入门，我大体总结下吧：你就直接把react理解成能够用js实现web前端的组件化开发的一个框架就好了，它通过虚拟DOM来简化DOM操作提升性能，同时更好的实现模块化封装。再深了也没必要说了。2、其次，你还得知道webpack是干什么的，对webpack不了解的请移步这里：webpack官网。这个网站我没有发现偏官方的中文站点，但是CSDN上应该有很多相关的教程。webpack是一个构建工具，能够把所有的静态资源
复制链接

扫一扫