집 > 기사 > 웹 프론트엔드 > 스캐폴딩 없이 반응을 구축하는 방법

스캐폴딩 없이 반응을 구축하는 방법

藏色散人원래의: 2020-12-15 10:11:353407검색

스캐폴딩 없이 반응을 빌드하는 방법: 먼저 npm init 명령을 사용하여 package.json 파일을 생성한 다음 필요한 종속성을 설치하고 package.json 파일의 내용을 수정한 다음 babel을 설치하고 마지막으로 반응 구성 요소를 작성합니다.

스캐폴딩 없이 반응을 구축하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, React17.0.1 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "react 비디오 튜토리얼"

스캐폴딩을 사용하려면 명령 하나만 필요합니다. 그러면 수동으로 React 프로젝트를 만드는 방법을 보여드리겠습니다. 그 과정이 여러분께 도움이 되길 바랍니다!

스캐폴딩 없이 반응 프로젝트를 구축하는 방법은 무엇입니까?

구체적인 단계는 다음과 같습니다.

1. npm init 명령을 사용하여 package.json 파일을 생성합니다.

2. 필요한 종속성을 설치합니다.

npm install --save react (安装React)
npm install --save react-dom  (安装React Dom)
npm install --save-dev webpack  (安装webpack，打包工具)
npm install --save-dev webpack-cli  (使用 webpack 4+ 版本，还需要安装 webpack-cli)
(安装webpack-dev-server，一个小型express服务器，主要特性是支持热加载) 
npm install --save-dev webpack-dev-server  
(webpack需要两个额外的组件来处理HTML：html-webpack-plugin和html-loader)
npm install --save-dev html-webpack-plugin html-loader

3. package.json 파일

"scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
},

4. webpack.config.js 파일에 다음 내용을 작성합니다

const HtmlWebPackPlugin = require("html-webpack-plugin");
 
module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./index.html",
            filename: "./index.html"
        })
    ]
};

5. Babel은 ES6 코드를 ES5 코드로 변환할 수 있도록 널리 사용되는 트랜스코더입니다. 기존 환경에서 실행 가능합니다.

npm install --save-dev @babel/core
(webpack并不知道如何将ES6语法转换为ES5，不过 webpack 可以使用 loader 来完成。
    即webpack加载器将一些东西作为输入，并将其转换为其他东西输出。)
npm install --save-dev babel-loader  
npm install --save-dev @babel/preset-env  (将ES6语法转码为ES5)
npm install --save-dev @babel/preset-react (将JSX语法转化为JavaScript)

새 구성 파일.babelrc를 생성하고 다음 내용을 작성합니다.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

기본적으로 환경이 구성되었습니다.

다음으로 반응 구성 요소를 작성합니다

6. 루트 디렉터리에 새 index.html을 만들고 다음 내용을 작성합니다

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>new react project</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

7. 새 src 폴더를 만들고 src 폴더 아래에 새 index.js를 만듭니다. 다음 내용

import React from &#39;react&#39;;
import ReactDom from &#39;react-dom&#39;;
 
class App extends React.Component {
    render() {
        return (
            <h1>
                Hello World !
            </h1>
        )
    }
}
 
ReactDom.render(
    <App />,
    document.getElementById(&#39;app&#39;)
);

8. npm start를 실행하여 브라우저에서 페이지에 액세스하세요.

9. npm run build를 실행하면 dist 폴더가 나타납니다. 해당 폴더에는 패키지 파일인 html과 js 파일이 포함되어 있습니다.

위 내용은 스캐폴딩 없이 반응을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json html es6 npm webpack JS

성명：

이전 기사：반응하는 JSX는 무엇입니까다음 기사：반응하는 JSX는 무엇입니까