Bevor Sie den Artikel schreiben, gehe ich davon aus, dass Sie bereits über die Grundkenntnisse von JavaScript, Node 包管理工具, Linux 终端操作 verfügen. Als nächstes werde ich Sie Schritt für Schritt beim Aufbau anleiten eine von Grund auf React Der Endeffekt des Projekts
Wir werden Webpack und Babel verwenden, um eine React-Anwendung zu erstellen, nämlich 更好的理解和掌握这些工具的使用
Die von uns erstellten Anwendungen müssen beides tun 最小 und folgen 最佳实践, um die Grundlage für nicht besonders qualifizierte Studenten zu festigen
Erstellen Sie Ihr Projekt , und fügen Sie Ihre Konfigurationsdatei hinzu package.json
mkdir webpack-babel-react-revisited cd webpack-babel-react-revisited yarn init
Wir installieren zuerst Webpack, es ist derzeit sehr beliebt 模块打包器, es enthält alle Module, die in einem verpackt sind kleine Menge 块, damit der Code vom Server in den Browser geladen wird
yarn add webpack --dev
Als nächstes beginnen wir mit dem Schreiben einiger Module. Wir speichern die Quelldatei app.js im Verzeichnis src
/** app.js */ console.log('Hello from 枫上雾棋!');
Dann führen wir Webpack
./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js
Wenn Sie das generierte app.bundle.js öffnen, Sie aus Ich werde feststellen, dass das Obige der Modulverarbeitungscode von webpack ist und das Folgende der console.log
ist, den wir geschrieben haben. Diese Anweisung besteht darin, unser app.js als Webpack von 入口文件 zu verwenden und geben Sie das Ergebnis in dist aus. In der tatsächlichen Entwicklung verwenden wir stattdessen die webpack-Konfigurationsdatei. Um die Dokumentstruktur klarer zu gestalten, beziehen Sie sich auf 目录
├── config │ ├── paths.js │ ├── webpack.config.prod.js ├── src │ ├── app.js ├── package.json
Das Folgende ist die Referenz 配置
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'),
};Diese Datei ist nicht notwendig, aber wenn das Projekt wächst, wird ihre Bedeutung sofort deutlich kommt heraus
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;Hier haben wir auch ein HTML-Webpack-Plugin hinzugefügt, das die Erstellung unserer HTML-Datei vereinfacht. Wir werden hier nicht näher darauf eingehen Wenn Sie es noch nicht wissen, können Sie auf den Link
klicken. Wir verwenden auch ein 语法糖, sodass wir beim Import keine Angabe der Erweiterung machen müssen >, .js .jsx
Webpack
./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.js
, um den Effekt in der Konsole anzuzeigen. Ist das nicht viel praktischer? index.htmlhtml Natürlich verwenden wir das definitiv nicht Methode zu
und führen Sie dann build aus. Ist das nicht ein sofortiges Gefühl? Serverpackage.json脚本命令Darüber hinaus stellt yarn build uns einen nice zur Verfügung, der auch
"scripts": {
"clean": "rimraf dist *.log .DS_Store",
"build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress"
}Webpackdev serverKonfigurationsdateien hinzufügen Im 模块热替换-Verzeichnis
webpack-dev-server
yarn add --dev webpack-dev-server
-Konfiguration hinzugefügt, das config-Plug-In. Wie der Name schon sagt, wird es uns helfen, die Adresse automatisch zu öffnen webpack.config.dev.jsendlich an uns zurückgegeben
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.jsdevServer open-browser-webpack-pluginJetzt können wir es wie folgt startendev server
Fühlst du dich nach dem Start für einen Moment großartig?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"
}Um es nutzen zu können
und höhere Versionen benötigen wir einyarn start
, das
in Code konvertieren kann, der im Browser ausgeführt werden kann. Darüber hinaus verfügt es auch über eine integrierteES6Alles, wir installieren die folgenden Abhängigkeitspakete 转换编译器BabelES6Erstellen Sie React JSX Standardkonfigurationsdatei JavaScipt
Dies sagt
yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react
Babel.babelrc zu verwenden, die wir gerade installiert haben, aktualisieren Sie als Nächstes die
{
"presets": ["env", "react"]
}BabelNach dem Update ist es zwar nicht zu sehen, aber was für eine Änderung die Tatsache, dass wir presets anstelle von
Reagierenwebpack
config.module = {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
}ES6 Installieren wir es zunächst
React
durch den folgenden Code, da wir
hinzufügen möchten und daher <🎜 ändern müssen > Konfigurationyarn add react react-dom
console.logReferenz
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'));<p id="app"></p>Als nächstes ist es Zeit, Zeuge des Wunders zu werdenhtml-webpack-plugin
重新启动服务，你有没有发现搭建一个 React 应用程序就这么简单
接下来，大家就可以 自行探索，添加更多的东西来适应自身应用程序的需要
下面再补充一下如何添加 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 其他内容，欢迎查看日志其他文章
Das obige ist der detaillierte Inhalt vonKenntnisse über Webpack, Babel und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
