欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

手动配置react环境教程

程序员文章站 2022-06-26 11:35:35
1.创建一个项目文件夹 2.打开命令行,并进入项目文件夹。 3.执行npm init -y初始化一个package.json文件,记录项目所需的依赖。 4.然后在命令行输入以...

1.创建一个项目文件夹

2.打开命令行,并进入项目文件夹。

3.执行npm init -y初始化一个package.json文件,记录项目所需的依赖。

4.然后在命令行输入以下命令来安装项目所需依赖。

npm install webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react css-loader style-loader file-loader url-loader html-webpack-plugin -D

npm install react react-dom bootstrap -S

webpack 【项目打包工具】

webpack-dev-server 【webpack提供的启动后台服务的工具】

babel-core 【babel核心工具】

babel-loader 【转译js文件的工具】

babel-preset-es2015 【转译es6】

babel-preset-stage-0 【转译es7】

babel-preset-react 【转译react】

css-loader 【转译css】

style-loader 【将转译的css,以内嵌式的方式插入HTML文件】

file-loader 【转译图片】

url-loader 【处理路径】

http-webpack-plugin 【编辑html文件】

-D 【安装在开发环境】

react 【。。。不介绍】

react-dom 【。。。也不说了】

bootstrap 【框架,只用来写css】

-S 【安装在生产环境】

项目文件夹内容:
           项目-|
               |-node_modules
               |-package.json

5.如果命令行特别牛逼,就用命令行操作以下操作就好。

不然就跟我一起用代码编辑器打开项目文件(我用webstorm).

5.1 项目目录下创建src文件夹,然后在src下建立index.js(打包的入口文件)。

5.2 项目目录下创建html文件,作为编译html文件的模板。

5.3 项目目录下建立webpack.config.js文件。(名字一点不能错)

let path = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve('build'),
        filename:'bundle.js'
    },
    module:{
        rules:[
                {test:/\.js$/,loader:'bebal-loader',exclude:/node_modules/,query:{preset:['es2015','stage-0','react']}},
                {test:/\.css$/,loader:['style-loader','css-loader']},
                {test:/\.(jpg|png|gif|eot|svg|woff|woff2|ttf)$/,loader:'url-loader'}
        ]
    },
    plugins:[
        new htmlWebpackPlugin ({
            template:'./index.html'
        })
    ]
}

6.配置启动命令

6.1 找到并打开package.json文件。

6.2 找到scripts。

6.3 在scripts中写入以下代码:

     "dev":"webpack-dev-server --open",
     "build":"webpack -p"

当在命令行项目文件下执行 npm run dev 后,会启动一个服务,并自动打开浏览器

当在命令行项目文件下执行npm run build后,会打包文件,打包后的文件在,build文件夹下。

然后就可以用react写项目了。