当我们使用React时，我们所有人都使用了CRA（create-react-app）。 它是一个了不起的工具。 它让我们只需要关注配置，就可以专注于React。 今天，我们将学习如何为我们的React应用设置Webpack和Babel。
首先，让我们了解Webpack和Babel。
Webpack：
它是一个模块捆绑器，使我们可以将项目文件捆绑到一个文件中。 它需要在根文件夹中有一个webpack.config.js文件。 通过提供入口点信息和输出信息，我们告诉webpack如何与我们的应用程序一起工作。
const path = require ( 'path' );
module .exports = {
entry : './src/app.js' , // relative path
output: {
path : path.join(__dirname, 'public' ), // absolute path
filename: 'bundle.js' // file name
}
};
入口点是我们的应用程序开始的地方，我们通过提供相对路径值进行设置。 然后output属性告诉webpack在哪里发出它创建的输出以及如何命名这些文件。 我们必须在输出路径属性中给出绝对路径值。
通天塔：
它是一个JavaScript编译器。 Babel本身实际上没有任何功能。 是的，它是一个编译器，但是默认情况下不会编译任何东西。 我们必须添加各种按钮和预设来添加支持特定语言的功能。 您可以通过访问Babel网站进行检查。 在babel网站导航栏部分中，您将找到Try It Out 。 点击它，您将获得一个新窗口。
在左侧窗口中，您可以编写代码，而在右侧窗口中，您将获得编译后的代码。 现在，让我们在左侧窗口中编写一些JSX。
const template = < p > Hello </ p > ;
在右侧窗口中，您将获得JavaScript可理解的编译代码，该代码始终在我们的React应用程序中运行。 在左侧，您会看到一些PRESETS选项，其中某些选项已被选中。 如果您现在取消选择react reacts预置选项，您将看到一个错误，原因是此react-preset负责将我们的JSX语法转换为JavaScript可理解的代码。
在我们的教程中，我们将使用两个预设：
- @ babel / preset-env ：-帮助babel将ES6，ES7和ES8代码转换为ES5。
- @ babel / preset-react ：-将JSX转换为JavaScript。
入门：
现在，我们对webpack和babel知之甚少。 让我们深入了解我们的React设置。
mkdir react-setup-tutorial
cd react-setup-tutorial
mkdir public src
touch public/index.html src/app.js
<!DOCTYPE html>
< html >
< 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 > React App </ title >
</ head >
< body >
< div id = "root" > </ div >
< script src = "./bundle.js" > </ script >
</ body >
</ html >
- 通过运行以下命令初始化项目：
npm init -y
安装Webpack和React：
npm install webpack webpack-cli -- save - dev
我们安装了webpack-cli，以便可以在命令行中使用webpack。
我们已经知道webpack在项目目录的根目录中需要webpack.config.js文件。 因此，让我们 使用以下代码 创建 webpack.config.js 文件。
const path = require ( 'path' );
module .exports = {
entry : './src/app.js' ,
output : {
path : path.join(__dirname, 'public' ),
filename : 'bundle.js'
}
};
接下来在 package.json中 添加webpack命令 ：
"scripts" : {
"start" : "webpack --mode=development" ,
"build" : "webpack --mode=production"
}
Webpack中有两种模式， 开发和生产 。 我们可以通过--mode标志来设置。 生产模式会生成可用于生产的优化文件。
安装React：
npm install react react-dom
现在，将react和react-dom导入我们的 app.js 文件中，并添加一些react代码。
import React from 'react' ;
import ReactDOM from 'react-dom' ;
const template = React.createElement( 'p' , {}, 'Hello from react' );
ReactDOM.render(template, document .getElementById( 'root' ));
现在，在终端中使用以下命令，并 在浏览器中 打开 index.html 文件。
您的应用运行良好。 但是您有一个疑问，为什么我们不使用JSX。 这次让我们尝试在我们的 app.js 文件中 使用一些JSX代码 。
import React from 'react' ;
import ReactDOM from 'react-dom' ;
const template = < p > Hello from react </ p > ;
ReactDOM.render(template, document .getElementById( 'root' ));
现在再次运行我们之前的命令。
这次您将得到一个错误。 那是因为我们使用JSX，而JavaScript不支持JSX。 因此，如果我们想在应用程序中使用JSX，则需要对其进行编译。 我们可以通过通天塔做到这一点。
安装和配置Babel：
npm install @ babel/core @ babel/preset-env @ babel/preset-react babel-loader --save-dev
我们已经知道@ babel / preset-env和@ babel / preset-react。 现在是@ babel / core和babel-loader。
- @ babel / core ：它允许我们从webpack等工具运行babel。
- babel-loader ：它是一个webpack插件。 它允许我们教webpack当webpack看到某些文件时如何运行babel。
让我们通过 在项目目录的根目录下 创建一个 .babelrc 文件并在其中包含以下内容来 配置babel 。
{
"presets" : [ "@babel/preset-env" , "@babel/preset-react" ]
}
该文件将告诉babel哪些预置用于编译代码。
现在是时候教webpack如何将JSX编译为JavaScript代码了。 为此，我们需要使用加载程序。 加载程序让我们自定义webpack在加载某些文件时的行为。 它会通过babel运行某些文件。 为此，我们需要通过对象上的模块属性在webpack.config.js文件中设置加载程序。 模块属性需要一个规则数组，并且一个规则让我们定义了如何使用加载程序。 现在，我们有一个规则来采用JSX并使用babel将其转换为JavaScript。
const path = require ( 'path' );
module .exports = {
entry : './src/app.js' ,
output : {
path : path.join(__dirname, 'public' ),
filename : 'bundle.js'
},
module : {
rules : [
{
test : /\.js$/ ,
exclude : /node_modules/ ,
loader : 'babel-loader'
}
]
}
};
在这里，我们设置了一个对象规则，其中loader属性告诉我们要使用哪个加载器，然后使用babel-loader 。 测试我们实际要在哪个文件上运行的文件的测试属性，并希望在以.js结尾的文件上运行它。 exclude属性可排除一组文件，我们使用/ node_modules /，因为我们不想通过这些库运行babel。 现在我们可以在React中使用JSX。 让我们再次运行我们的应用程序。
这次我们没有任何错误。 在浏览器中打开index.html文件，可以。
配置源地图：
让我们在webpack.config.js文件中添加一些额外的配置设置。
const path = require ( 'path' );
module .exports = {
entry : './src/app.js' ,
output : {
path : path.join(__dirname, 'public' ),
filename : 'bundle.js'
},
module : {
rules : [
{
test : /\.js$/ ,
exclude : /node_modules/ ,
loader : 'babel-loader'
}
]
},
devtool : 'cheap-module-eval-source-map'
};
在这里，我们通过使用devtool属性来设置源地图。 它增强了我们的调试过程。 它用于在调试时显示我们的原始JavaScript，这比缩小代码要容易得多。
安装开发服务器：
在终端中运行以下命令。
npm install webpack- dev -server -- save - dev
在 webpack.config.js 文件中 添加以下代码 。
const path = require ( 'path' );
module .exports = {
entry : './src/app.js' ,
output : {
path : path.join(__dirname, 'public' ),
filename : 'bundle.js'
},
module : {
rules : [
{
test : /\.js$/ ,
exclude : /node_modules/ ,
loader : 'babel-loader'
}
]
},
devtool : 'cheap-module-eval-source-map' ,
// changed line
devServer: {
contentBase : path.join(__dirname, 'public' )
}
};
接下来 在package.json中 添加 webpack-dev-server 命令：
"scripts" : {
"start" : "webpack --mode=development" ,
"build" : "webpack --mode=production" ,
"dev-server" : "webpack-dev-server"
}
现在运行此命令。
它将启动开发服务器。 它为我们提供了可以访问它的输出。 现在，我们将这两种工具集成在一起，开发服务器既是我们的服务器，也是为我们运行的webpack。
现在，我们可以访问突出显示的URL，我们将获得我们的应用程序。
加载样式：
让我们在src目录中创建一个新文件和文件夹。
使用以下命令创建文件和文件夹。
mkdir src/styles
touch src/styles/styles.css
现在，在 styles.css 文件中 添加以下样式 。
要加载我们的style.css文件，我们需要在webpack.config.js文件中设置新规则。
在此之前，我们需要安装一些新的加载程序。
npm install css-loader style -loader --save-dev
- css-loader：允许webpack加载我们的CSS资产。
- style-loader：获取CSS并通过注入<style>标签将其添加到DOM中。
现在，在我们的 webpack.config.js 文件中 添加新规则 。
const path = require ( 'path' );
module .exports = {
entry : './src/app.js' ,
output : {
path : path.join(__dirname, 'public' ),
filename : 'bundle.js'
},
module : {
rules : [
{
test : /\.js$/ ,
exclude : /node_modules/ ,
loader : 'babel-loader'
},
// New rules to load css
{
test : /\.css$/ ,
use : [ 'style-loader' , 'css-loader' ]
}
]
},
devtool : 'cheap-module-eval-source-map' ,
devServer : {
contentBase : path.join(__dirname, 'public' )
}
};
在我们的app.js文件中导入style.css并运行dev-server以查看效果。
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './styles/styles.css' ;
const template = < p > Hello from react </ p > ;
ReactDOM.render(template, document .getElementById( 'root' ));
如果要使用SCSS，则需要安装sass-loader ，这将帮助webpack将sass编译为css。 sass-loader依赖于另一个包node-sass 。
npm install sass-loader node -sass --save-dev
const path = require ( 'path' );
module .exports = {
entry : './src/app.js' ,
output : {
path : path.join(__dirname, 'public' ),
filename : 'bundle.js'
},
module : {
rules : [
{
test : /\.js$/ ,
exclude : /node_modules/ ,
loader : 'babel-loader'
},
// Rules to load scss
{
// Some change here
test: /\.scss$/ ,
use : [ 'style-loader' , 'css-loader' , 'sass-loader' ]
}
]
},
devtool : 'cheap-module-eval-source-map' ,
devServer : {
contentBase : path.join(__dirname, 'public' )
}
};
现在改变我们的style.css文件扩展名的.css到.scss是style.scss。
Alos将app.js中的CSS导入更改为：
import './styles/styles.scss' ;
并添加以下样式，以确保我们的Wepback对于SASS正常工作。
$brand-color : blue;
* {
color : $brand-color ;
}
现在，使用以下命令再次运行dev-server。
然后我们为SASS配置webpack。
而已。 现在我们已经为React配置了Webpack和Babel，可用于创建React项目。 感谢您的阅读和关注。🙂
先前发布在https://dev.to/iamismile/how-to-setup-webpack-and-babel-for-react-59ph
From: https://hackernoon.com/how-to-setup-webpack-and-babel-7-for-react-6xpy3615
转播
