从零创建一个React应用，不使用脚手架工具。 Github链接
一组JavaScript构建工具链通常由这些组成：
-
一个
package管理器，比如Yarn或npm。它能让你充分利用庞大的第三方 package 的生态系统，并且轻松地安装或更新它们。 -
一个打包器，比如
webpack或Parcel。它能让你编写模块化代码，并将它们组合在一起成为小的package，以优化加载时间。 -
一个编译器，例如
Babel。它能让你编写的新版本JavaScript代码，在旧版浏览器中依然能够工作。
从头开始打造你自己的 JavaScript 工具链，这个教程重新创建了一些 Create React App 的功能。
.
├── LICENSE
├── README.md
├── package.json
├── public
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ └── index.js
├── webpack.config.js
├── .gitignore
└── .babelrc
以下是在mac终端中实现的，具体文件的内容可直接粘贴本项目对应的文件
-
初始化
npm项目，生成package.json。 -
初始化
git，创建.gitignore忽略指定文件(node_modules等)。 -
添加
public/index.html。 -
安装
Babel，创建.babelrc进行配置。 -
安装
webpack，创建webpack.config.js进行配置。 -
安装
react、react-dom、热更新react-hot-loader。 -
添加
src/index.js、src/App.js、src/App.css。 -
配置
package.json，修改启动命令。 -
启动项目。
准备：确保本机上已经安装npm、node、(git)
如果你不打算添加版本控制，所有git操作均可忽略。
- 初始化
npm项目，生成package.json。
npm init -y
- 初始化
git，创建.gitignore忽略指定文件(node_modules等)。
git init
touch .gitignore
.gitignore
#这个文件是让git过滤的列表
#过滤依赖
/node_modules
#过滤生产
/dist/
/build/
#苹果系统的隐藏文件
.DS_Store
- 添加
public/index.html。
mkdir public
cd public
touch index.html
index.html
<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Starter</title>
</head>
<body>
<div id="root"></div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<script src="../dist/bundle.js"></script>
</body>
</html> 这里引入的bundle.js后面会用到。
- 安装
Babel，创建.babelrc进行配置。
cd ..
npm install -D @babel/core@7.1.0 @babel/cli@7.1.0 @babel/preset-env@7.1.0 @babel/preset-react@7.0.0.
touch .babelrc
.babelrc
{
"presets": ["@babel/env", "@babel/preset-react"]
}- 安装
webpack，创建webpack.config.js进行配置。
npm install -g -D webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
touch webpack.config.js
webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["@babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
hotOnly: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};- 安装
react、react-dom、热更新react-hot-loader。
npm install -D react react-dom react-hot-loader
- 添加
src/index.js、src/App.js、src/App.css。
mkdir src
cd src
touch index.js
touch App.js
touch App.css
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));App.js
import React, { Component} from "react";
import {hot} from 'react-hot-loader';
import "./App.css";
class App extends Component{
render(){
return(
<div className="App">
<h1> Hello</h1>
</div>
);
}
}
export default hot(module)(App);App.css
.App {
margin: 1rem;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid red;
}- 配置
package.json，修改启动命令。
在package.json里配置scripts字段。
"scripts": {
"start": "webpack-dev-server --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
}- 启动项目。
npm start
在浏览器键入http://localhost:3000以启动项目
Creating a React App… From Scratch. Webpack - webpack-dev-server: command not found 推送提交到远程仓库