建立react應用（一）

時間 2019-11-15

標籤建立 react 應用欄目 React 简体版

原文原文鏈接

雖然已經有了create-react-app這種很是方便的工具，可是封裝了太多，對於裏面的一些細節不是很瞭解，因此頗有必要手動建立。javascript

建立項目目錄

mkdir react-project
cd react-project

初始化package.json

yarn init

在填寫回答的時候，entry point寫app/main.js，其餘問題所有回車便可html

~ yarn init
yarn init v1.12.3
question name (react-project):
question version (1.0.0):
question description:
question entry point (index.js): app/main.js
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
✨  Done in 16.91s.

安裝依賴

yarn add --dev webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin webpack-merge babel-loader
yarn add react react-dom prop-types

建立目錄結構

/---babel.config.js
+---app
|   \---main.js
|   \---index.html
+---build
|   \---webpack.config.base.js
|   \---webpack.config.dev.js
|   \---webpack.config.prod.jd

babel.config.js

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "targets": {
          "browsers": [
            "cover 99.5% in CN"
          ]
        }
      }
    ],
    "@babel/preset-react"
  ]
}

app/main.js

import ReactDOM from "react-dom";
import React from "react";

function App() {
    return (
        <div className="App">
            <h1>Hello World</h1>
        </div>
    );
}

const rootElement = document.getElementById("root");

ReactDOM.render(<App/>, rootElement);

app/index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>

build/webpack.config.base.js

"use strict";
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "../app/main.js"),
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "app/index.html"
        })
    ]
};

build/webpack.config.dev.js

"use strict";
var baseWebpackConfig = require("./webpack.config.base");
var merge = require("webpack-merge");

module.exports = merge(baseWebpackConfig, {
    mode: "development",
    devtool: "source-map"
});

build/webpack.config.prod.js

"use strict";
var baseWebpackConfig = require("./webpack.config.base");
var merge = require("webpack-merge");
var path = require("path");

module.exports = merge(baseWebpackConfig, {
    mode: "production",
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "bundle.[hash].js"
    }
});

package.json里加scripts

"scripts": {
    "build:dev": "webpack --config build/webpack.config.dev.js",
    "build:prod": "webpack --config build/webpack.config.prod.js"
  }

編譯代碼

作完上面的全部步驟就能夠執行編譯命令了，yarn build:dev或者yarn build:prodjava

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。