webpack+babel+es6+react环境搭建

最新推荐文章于 2024-11-15 13:57:50 发布

原创最新推荐文章于 2024-11-15 13:57:50 发布 · 880 阅读

0 ·

CC 4.0 BY-SA版权

前端工具同时被 2 个专栏收录

5 篇文章

订阅专栏

React

1 篇文章

订阅专栏

本文详细介绍了一个简单的React开发环境搭建过程，包括创建项目目录结构、安装并配置Webpack、支持ES6语法及React应用，并通过示例代码展示了如何创建一个基本的React组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文为简单搭建一个react的初始开发环境。

1.工程目录

新建一个工程目录(比如react-demo)，在window中cmd控制台进入该目录下，执行npm init初始化目录，如下

在工程目录下新建文件夹src用来存放源文件，新建文件夹dist用来存放打包后的文件，在src内新建文件夹component用来存放组件，新建文件index.js表示打包的入口文件，在根目录下新建webpack.config.js作为webpack的配置文件.如下：

2.安装webpack

局部安装

npm install webpack --save-dev

在webpack.config.js中加入以下配置：

var path = require('path');

module.exports = {
    entry: {
        app: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].bundle.js'
    }
}

3.在package.json中添加命令

在包文件中的script中添加一条命令，然后在控制台输入npm run dev执行打包命令：

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "./node_modules/.bin/webpack"   //执行webpack命令
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.5.1"
  }
}

4.支持es6和react

项目安装babel，如下

npm install babel-loader babel-core babel-preset-es2015 --save

项目安装react，如下：

npm install react react-dom babel-preset-react --save

在webpack加入配置：

var path = require('path');

module.exports = {
    entry: {
        app: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: path.resolve(__dirname,'/node_modules/'),
                loader: 'babel-loader',
                options: {
                    presets: ['es2015','react']
                }
            }
        ]
    },
    // 在import的时候可以省略文件名后缀
    resolve: {
        extensions: ['.js','.jsx','.json','.conffee']
    }
}

在入口文件index.js中写入以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

class IndexComponent extends React.Component{
    render() {
        return <h1>hello world!</h1>
    }
}

var dom = document.getElementById('app');

ReactDOM.render(
    <IndexComponent />,
    dom
)

在dist目录下新建一个index.html，插入打包后的js文件，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <div id="app"></div>
    <script src="./app.bundle.js"></script>
</body>
</html>

在浏览器打开，f12审查元素：

另外组件在写css时候可能要用到css-loader等一系列加载器，我们这不累赘。

5.安装webpack服务器

安装webpack-server-dev，如下：

npm install webpack-server-dev --save

修改package.json文件下的dev命令为：

"dev": "./node_modules/.bin/webpack-dev-server --content-base dist"

运行npm run dev,在浏览器中输入localhost:8080查看结果