如何使用图像为自定义 Hello 世界构建管道
第 1 步:安装 Node.js.
你将构建的构建管道基于 Node.js,因此你必须在第一个实例中确保已安装此管道。有关如何安装 Node.js 的说明,你可以在此处查看 SO 文档
第 2 步:将项目初始化为节点模块
在命令行上打开项目文件夹,然后使用以下命令:
npm init
对于这个例子的目的,你可以随意取默认值,或者,如果你想在这一切都意味着你可以签出更多的信息本上设置包的配置 SO 文档。
第 3 步:安装必要的 npm 包
在命令行上运行以下命令以安装此示例所需的软件包:
npm install --save react react-dom
然后对于 dev 依赖项运行此命令:
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader
最后 webpack 和 webpack-dev-server 是值得全局安装的东西,而不是作为项目的依赖项,如果你更愿意将它作为依赖项添加,那么这将是有效的,我不这样做。这是运行的命令:
npm install --global webpack webpack-dev-server
第 3 步:将 .babelrc 文件添加到项目的根目录
这将设置 babel 使用你刚刚安装的预设。你的 .babelrc 文件应如下所示:
{
"presets": ["react", "es2015"]
}
第 4 步:设置项目目录结构
在目录的根目录中设置一个类似于下面的目录结构:
|- node_modules
|- src/
|- components/
|- images/
|- styles/
|- index.html
|- index.jsx
|- .babelrc
|- package.json
注意:node_modules
,.babelrc
和 package.json
都应该已经从之前的步骤中包含它们,所以你可以看到它们适合的位置。
步骤 5:使用 Hello World 项目文件填充项目
这对于构建管道的过程并不重要,所以我只是给你这些代码,你可以将它们复制粘贴到:
SRC /组件/ HelloWorldComponent.jsx
import React, { Component } from 'react';
class HelloWorldComponent extends Component {
constructor(props) {
super(props);
this.state = {name: 'Student'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({name: e.target.value});
}
render() {
return (
<div>
<div className="image-container">
<img src="./images/myImage.gif" />
</div>
<div className="form">
<input type="text" onChange={this.handleChange} />
<div>
My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
</div>
</div>
</div>
);
}
}
export default HelloWorldComponent;
SRC /图像/ myImage.gif
你可以随意替换任何你喜欢的图像,只是为了证明我们可以绑定图像。如果你提供自己的图像并将其命名为不同的图像,则必须更新 HelloWorldComponent.jsx
以反映你的更改。同样,如果你选择具有不同文件扩展名的图像,则需要使用适当的正则表达式修改 webpack.config.js 中图像加载器的 test
属性以匹配你的新文件扩展名。
SRC /风格/ Styles.css 中
.form {
margin: 25px;
padding: 25px;
border: 1px solid #ddd;
background-color: #eaeaea;
border-radius: 10px;
}
.form div {
padding-top: 25px;
}
.image-container {
display: flex;
justify-content: center;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning to build a react pipeline</title>
</head>
<body>
<div id="content"></div>
<script src="app.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';
require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');
render(<HelloWorldComponent />, document.getElementById('content'));
第 6 步:创建 webpack 配置
在项目的根目录中创建一个名为 webpack.config.js 的文件,并将此代码复制到其中:
webpack.config.js
var path = require('path');
var config = {
context: path.resolve(__dirname + '/src'),
entry: './index.jsx',
output: {
filename: 'app.js',
path: path.resolve(__dirname + '/dist'),
},
devServer: {
contentBase: path.join(__dirname + '/dist'),
port: 3000,
open: true,
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.gif$/,
loaders: [
'file?name=[path][name].[ext]',
'image-webpack',
]
},
{ test: /\.(html)$/,
loader: "file?name=[path][name].[ext]"
}
],
},
};
module.exports = config;
第 7 步:为你的管道创建 npm 任务
为此,你需要将两个属性添加到项目根目录中 package.json 文件中定义的 JSON 的 scripts 键。使你的脚本键看起来像这样:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
test
脚本已经存在,你可以选择是否保留,这个例子并不重要。
第 8 步:使用管道
从命令行,如果你在项目根目录中,你现在应该能够运行命令:
npm run build
这将绑定你构建的小应用程序并将其放在将在项目文件夹的根目录中创建的 dist/
目录中。
如果你运行命令:
npm start
然后,你构建的应用程序将在 webpack dev 服务器实例内的默认 Web 浏览器中提供。