快速搭建React的环境步骤详解(2)

日期：2020-05-11 栏目：程序人生浏览：次

第三步：写一段简单的React代码。

var React = require('react');
var ReactDOM = require('react-dom');

var element = React.createElement(
 'h1',
 {className: 'yunmo'},
 '云陌，欢迎来到react的世界！'
 );

ReactDOM.render (
 element,
 document.getElementById('yunmo')
);

第四步：运行。

那么如何在浏览器里运行呢？这里我们需要借助强大的webpack-dev-server来开启本地服务器。

我们可以看到上面的package.json里面有webpack和webpack-dev-server依赖包。下面会介绍webpack。

当然我们还可以通过nodejs来建立一个本地服务器，但这里其实webpack-dev-server是一个小型的nodejs Express服务器，它使用webpack-dev-middleware中间件来服务于webpack包。

webpack.config.js文件配置如下：

var webpack = require('webpack');

module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: __dirname + '/build',
  filename: 'bundle.js'
 },
 module: {
  loaders: []
 }
}

这样我们在命令行通过npm install安装好依赖包以后，敲打命令

$ npm start

运行服务后，在浏览器中输入http://localhost:8080/

React在浏览器运行结果

一个简单的React项目便运行起来了。

3、Webpack

webpack是一款现代JavaScript应用的模块加载兼打包工具，它不仅仅可以打包JavaScript，还可以打包styles，images等资源。

来看一个典型的webpack配置：

var webpack = require('webpack');
var path = require('path')

module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: path.resolve(__dirname, '/build'),
  filename: 'bundle.js'
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
   },
   {
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
   },
   {
    test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,
    loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
   }
  ]
 },
 plugins: [
  new webpack.optimize.UglifyJsPlugin()
 ]
}

从上面webpack配置里面可以看出来有一些基本的配置点，也反映了webpack的四个理念：

entry——webpack会根据应用的依赖关系，创建一个关系表。该表的起始点便是所谓的entry point（入口点）。entry point会告诉webpack从哪入手，webpack会以该表的依赖关系作为打包依据。
output——用于配置打包后的文件放置路径。
loader——webpack把每个文件都看作组建（如.css, .html, .scss, .jpg, .png等），但是webpack只能识别JavaScript。这时候loaders便可以把这些文件转换成组建，进而被添加到依赖关系表。

快速搭建React的环境步骤详解(2)

相关推荐