React 搭建PC 开发环境

最新推荐文章于 2022-05-29 17:47:32 发布

DenggLin

最新推荐文章于 2022-05-29 17:47:32 发布

阅读量1k

点赞数

分类专栏： react

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一步：

安装node.js

第二步

安装webpack

npm install webpack -g

第三步创建项目
1.创建一个根目录，目录名为react-webpack-master,执行命令

cd react-webpack-master/ 切换到该目录下

2.使用 npm init 初始化，生成 package.json 文件：执行命令:

npm init 自定义创建package.json
npm init -yes 可以创建默认的package.json

3.现在我们的项目已经创建好了,接下来我们来添加依赖包及插件
(1)局部安装Webpack,执行命令：

npm install webpack --save-dev

(2)安装React,–save 命令用于将包添加至 package.json 文件,执行命令:

npm install react react-dom --save-dev

(3)安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。

npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev

webpack.config.js配置:

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        port: 8181
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }

            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

entry: 指定打包的入口文件 main.js。
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称。
devServer：设置服务器端口号为 8181，端口后你可以自己设定。
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到自动刷新的效果。

安装webpack-dev-server执行命令:

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

在package.json文件中为scripts添加,方便使用命令:

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

这里的命令是webpack,如果需要压缩编译的话,将webpack改成webpack -p

最终package.json文件如下

{
  "name": "react",
  "version": "1.0.0",
  "description": "react-webpack-stu",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

这里有一点提醒大家，package.json中name不能跟我们的模块和项目文件目录同名
项目代码编写：

1.index.html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Test</title>
</head>
<body>
<script src="http://localhost:8181/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>

2.main.js代码

let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/Tab1');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

3.Tab1.js代码

var React = require('react');
var Tab1= React.createClass({
    render: function () {
        return (
            <div>
                React+Webpack+ES6从环境搭建到HelloWorld
            </div>
        );
    }
});

module.exports = Tab1;

代码编译结束:

1.根目录下执行命令

npm run dev

2.浏览器直接访问:

http://localhost:8181/index.html

DenggLin

关注

0
点赞
踩
2

收藏

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

第一步：安装node.js第二步安装webpacknpm install webpack -g第三步创建项目1.创建一个根目录，目录名为react-webpack-master,执行命令cd react-webpack-master/ 切换到该目录下2.使用 npm init 初始化，生成 package.json 文件：执行命令:npm init 自定义创建packag...
复制链接

扫一扫