Webpack, Babel, React에 대한 지식
- 一个新手원래의
- 2017-10-25 14:14:591818검색
시작하기 전에
글을 쓰기 전에, 모든 분들이 이미 JavaScript, 노드 패키지 관리 도구, Linux 터미널 운영에 대한 기본 기술을 갖고 있다고 가정합니다. code> , 다음으로 처음부터 React 프로젝트를 빌드하는 방법을 단계별로 안내하겠습니다JavaScript，Node 包管理工具，Linux 终端操作 这些基本技能，接下来，我将一步一步指引大家从头搭建一个 React 项目
最终实现的效果
我们将使用 Webpack 和 Babel 搭建一个 React 应用，我们的目的很清晰，就是 更好的理解和掌握这些工具的使用
我们创建的应用程序既要做到 最小，也要遵循 最佳实践，为不是特别熟练的同学巩固一下基础
初始化
创建你的项目，并添加的你的配置文件 package.json
mkdir webpack-babel-react-revisited cd webpack-babel-react-revisited yarn init
Webpack
我们首先安装 Webpack，它是目前非常流行的 模块打包器，它将应用程序包含的每个模块打包成少量的 块，以便这些代码从服务器加载到浏览器中
yarn add webpack --dev
接下来，我们开始书写一些模块。我们将源文件 app.js 保存到 src 目录中
/** app.js */ console.log('Hello from 枫上雾棋!');
然后，我们跑一下 Webpack
./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js
如果你打开生成的 app.bundle.js，你会发现上面是 webpack 的模块处理代码，下面是我们书写的 console.log
这条指令是将我们的 app.js 作为 Webpack 的 入口文件，将结果输出到 dist 文件夹中，指令有些冗长，在实际开发中，我们使用 webpack 配置文件来代替，为了文档结构看起来更加清晰，参考 目录 如下
├── config │ ├── paths.js │ ├── webpack.config.prod.js ├── src │ ├── app.js ├── package.json
下面是参考 配置
paths.js
const path = require('path');
const fs = require('fs');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
appDist: resolveApp('dist'),
appSrc: resolveApp('src'),
};这个文件不是必须的，但在项目增大后，它的意义就瞬间出来了
webpack.config.prod.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const paths = require('./paths');
const plugins = [
new HtmlWebpackPlugin({
title: 'webpack babel react revisited',
filename: path.join(paths.appDist, 'index.html'),
}),
];
const config = {
entry: {
app: path.join(paths.appSrc, 'app'),
},
output: {
path: paths.appDist,
filename: 'assets/js/[name].js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins,
};
module.exports = config;这里我们还添加了一个 html-webpack-plugin，它简化了我们 HTML 文件的创建，安装我们就不再这里赘述了，如果还不知道的同学可以点击链接查看
其中，我们还使用了一个 语法糖，这样在我们导入 .js，.jsx 时就不需要指定扩展名了
接下来，我们指定配置文件再跑一下 Webpack
./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.js
发现除了实现上面的效果外，还自动帮我们生成了一个 index.html，我们可以点击这个 html，在控制台中查看效果，相比上面，是不是方便了很多
当然，最后我们肯定也不是使用这种方式来 build，打开 package.json，添加如下 脚本命令，然后执行 yarn build，是不是瞬间感觉 nice 了很多
"scripts": {
"clean": "rimraf dist *.log .DS_Store",
"build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress"
}Webpack dev server
除此之外，Webpack 为我们提供了一个的 dev server，它还支持 模块热替换
首先，安装 webpack-dev-server
yarn add --dev webpack-dev-server
在 config 目录中添加配置文件 webpack.config.dev.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const paths = require('./paths');
const hostname = process.env.HOST || 'localhost';
const port = process.env.PORT || 3000;
const plugins = [
new HtmlWebpackPlugin({
title: 'webpack babel react revisited',
filename: path.join(paths.appDist, 'index.html'),
}),
new OpenBrowserPlugin({ url: `http://${hostname}:${port}` }),
];
const config = {
entry: {
app: path.join(paths.appSrc, 'app'),
},
output: {
path: paths.appDist,
filename: 'assets/js/[name].js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins,
devServer: {
contentBase: paths.appDist,
compress: true,
port,
},
};
module.exports = config;在 webpack.config.prod.js 的基础上，我们增加了 open-browser-webpack-plugin 插件和 devServer 配置，open-browser-webpack-plugin 插件顾名思义，会帮我们自动打开 dev server 最后返回给我们的地址
更新 package.json
"scripts": {
"clean": "rimraf dist *.log .DS_Store",
"webpack:dev":
"NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress",
"webpack:prod":
"NODE_ENV=production webpack --config config/webpack.config.prod.js --progress",
"start": "yarn run clean && yarn run webpack:dev",
"build": "yarn run clean && yarn run webpack:prod"
}现在，我们就可以通过如下方式来启动
yarn start
启动后，有没有瞬间感觉很棒
Babel
为了能够使用 ES6 以及更高版本，我们需要一个 转换编译器，我们选择 Babel，它能将 ES6 转换成可以在浏览器中运行的代码，除此之外，他还内置了 React JSX 扩展，可以说它的出现推动了 JavaScipt 的发展
所有，我们安装下面这些依赖包
yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react
创建 Babel 默认配置文件 .babelrc
{
"presets": ["env", "react"]
}这个是告诉 Babel 用我们刚刚安装的两个 presets
接下来，更新 webpack 配置文件
config.module = {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
}更新以后，虽然看不到什么变化，但事实上我们可以使用 ES6 了
React
最后，我们来添加 React，这也可能是你阅读这篇文章的原因
首先，我们还是先安装它
yarn add react react-dom
用下面代码替换 console.log
import React, { Component } from 'react';
import { render } from 'react-dom';
export default class Hello extends Component {
render() {
return <h1>Hello from 枫上雾棋!</h1>;
}
}
render(<Hello />, document.getElementById('app'));因为要添加 cec9c1bb071f21a3af0e115be5b0b2e994b3e26ee717c64999d7867364b1b4a3，所以我们要修改一下 html-webpack-plugin 的配置
new HtmlWebpackPlugin({
template: path.join(paths.appSrc, 'index.html'),
}),参考 template
Webpack 및 Babel <code>React 애플리케이션을 구축하려는 목적은 매우 명확합니다. 이러한 도구의 사용을 더 잘 이해하고 숙달하는 것입니다.🎜🎜우리가 생성하는 애플리케이션은 code> 최소이지만 모범 사례를 따라 특별히 숙련되지 않은 학생들을 위한 기반을 통합하세요. 🎜🎜초기화🎜🎜프로젝트를 만들고 구성 파일 package .json을 추가하세요. 🎜<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>webpack babel react revisited</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<p id="app"></p>
</body>
</html>🎜Webpack🎜🎜먼저 애플리케이션에 포함된 모든 모듈을 포함하는 매우 인기 있는 모듈 패키저인 Webpack을 설치합니다. 서버에서 브라우저로 코드를 로드할 수 있도록 청크 수🎜body,
html,
#app {
margin: 0;
width: 100%;
height: 100%;
}
#app {
padding: 30px;
font-family: '微软雅黑';
}🎜다음으로 일부 모듈 작성을 시작합니다. 소스 파일 app.js를 src 디렉토리에 저장합니다🎜yarn add --dev css-loader style-loader extract-text-webpack-plugin🎜그런 다음
Webpack🎜import './style.css';🎜을 실행합니다. 생성된 app.bundle.js를 보면 위가
webpack의 모듈 처리 코드이고, 다음이 console.log🎜🎜임을 알 수 있습니다. 우리는 app.js를 Webpack의 항목 파일로 사용하고 결과를 dist에 출력하라는 명령을 작성했습니다. code> 폴더에 대한 설명이 좀 길어요. 실제 개발에서는 대신 webpack 구성 파일을 사용하여 문서 구조를 더 명확하게 보이도록 합니다. > 다음과 같습니다🎜config.module = {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
},
],
}
config.plugins.push([
new ExtractTextPlugin("styles.css"),
])🎜다음은 참고Configuration🎜🎜paths.js🎜yarn add --dev file-loader🎜이 파일은 꼭 필요한 파일은 아니지만 프로젝트가 커지면 그 의미가 나옵니다. 즉시🎜🎜
webpack.config .prod.js🎜import avatar from './images/avatar.jpg';
export default class Hello extends Component {
render() {
return (
<p>
<img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} />
</p>
);
}
}🎜여기에는 HTML 파일 생성을 단순화하는 html-webpack-plugin도 추가했습니다. 여기에서 설치에 대한 자세한 내용을 살펴보세요. 아직 모르는 학생은 링크를 클릭하여 볼 수 있습니다. 🎜🎜 그중에서도 구문 설탕을 사용하므로 를 가져올 때 >.js, .jsx 🎜🎜다음에는 구성 파일을 지정하고 Webpack을 실행하면 확장자를 지정할 필요가 없습니다🎜config.module = {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/',
},
},
],
},
],
}🎜찾았습니다 위의 효과를 달성하는 것 외에도 index for us .html도 자동으로 생성했으며, 이 html을 클릭하면 콘솔에서 효과를 비교할 수 있습니다. 위의 방법이 훨씬 더 편리할까요🎜🎜물론, 결국 우리는 빌드, package.json 열기, 다음 추가에 이 방법을 사용하지 않을 것입니다. script 명령어를 실행한 후 yarn build를 실행하세요. 가 🎜rrreee🎜Webpack dev server🎜🎜가 많다는 느낌이 드시나요? <code>Webpack은 모듈 핫 교체도 지원하는 dev 서버를 제공합니다🎜🎜먼저 webpack-dev-server를 설치합니다. code>🎜rrreee🎜config 디렉토리 .js에 webpack.config.dev 구성 파일을 추가하세요🎜rrreee🎜webpack.config.prod.js를 기반으로, open-browser-webpack-plugin 플러그인과 <code>devServer 구성, open-browser-webpack-plugin을 추가했습니다. 이름에서 알 수 있듯이 플러그인은- in은 dev 서버를 자동으로 열고 마지막으로 주소를 우리에게 반환하는 데 도움이 됩니다🎜🎜package.json 업데이트 🎜rrreee🎜이제 다음과 같은 방법으로 시작할 수 있습니다🎜 rrreee🎜시작하고 나면 잠시 기분이 좋아지죠🎜🎜Babel🎜🎜ES6 이상을 사용하려면 변환 컴파일러가 필요하고, ES6를 브라우저에서 실행할 수 있는 코드로 변환할 수 있는 Babel을 선택하세요. 또한 React JSX 확장 기능도 내장되어 있습니다. .그의 출현이 JavaScipt의 개발을 촉진했다고 할 수 있습니다🎜🎜모두 다음 종속성 패키지를 설치합니다🎜rrreee🎜 Babelcode> 생성 기본 구성 파일 .babelrc🎜rrreee🎜이것은 Babel에게 방금 설치한 두 개의 presets를 사용하도록 지시합니다🎜🎜다음으로 webpack 구성 파일을 업데이트합니다. 🎜rrreee🎜업데이트 후 변경 사항을 볼 수는 없지만 실제로는 ES6🎜🎜React🎜🎜을 사용할 수 있습니다. 마지막으로 React를 추가해 보겠습니다. 이 글을 읽고 있는 이유🎜🎜우선 설치부터 해보자🎜rrreee🎜console.log를 다음 코드로 교체🎜rrreee🎜 c326cc7cad078a4d4efc3faa684aac1b94b3e26ee717c64999d7867364b1b4a3이므로 html-webpack-plugin 구성을 수정해야 합니다. 🎜rrreee🎜템플릿을 참조하세요. 다음과 같이🎜rrreee🎜다음 단계는 기적을 목격하는 것입니다🎜重新启动服务，你有没有发现搭建一个 React 应用程序就这么简单
接下来，大家就可以 自行探索，添加更多的东西来适应自身应用程序的需要
下面再补充一下如何添加 CSS 和 图片
CSS
每个 web 应用程序都离不开 CSS，我们在 src 目录中创建 style.css
body,
html,
#app {
margin: 0;
width: 100%;
height: 100%;
}
#app {
padding: 30px;
font-family: '微软雅黑';
}将其添加到应用程序中我们需要使用 css-loader
如果想将 css 注入 style 标签中，我们还需要 style-loader，通常，是将这两个结合使用
我们使用 extract-text-webpack-plugin 将其解压到外部
为此，我们首先安装
yarn add --dev css-loader style-loader extract-text-webpack-plugin
然后在 app.js 中导入 style.css
import './style.css';
最后更新 webpack 配置文件
config.module = {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
},
],
}
config.plugins.push([
new ExtractTextPlugin("styles.css"),
])看起来稍显复杂，但是大功告成，为了更好地使用它，我们都得经历这个过程
重新启动服务，你会发现你的 dist 目录中多了一个 styles.css
图片
最后我们增加 file-loader 来处理我们引入的图片等文件
首先，安装 file-loader
yarn add --dev file-loader
我们在 src/images 中放入一张图片，在 app.js 中导入
import avatar from './images/avatar.jpg';
export default class Hello extends Component {
render() {
return (
<p>
<img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} />
</p>
);
}
}更新 webpack 配置文件
config.module = {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/',
},
},
],
},
],
}重启服务，哈哈
总结
如果有什么问题，可以查看 webpack-babel-react-revisited 仓库
现在，大家对搭建 React 应用程序是不是感觉轻松了很多，但 React 整个技术栈并不止包括这些，还有 Redux，React Router，单元测试，代码校验 等内容，关于 React 其他内容，欢迎查看日志其他文章
위 내용은 Webpack, Babel, React에 대한 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!