JS index.js 파일에 접속하는 index.html을 ID 참조용으로 어떻게 반응합니까?
요즘 리액션을 시작해요.
my index.html은 다음을 포함합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
및 index.timeout에는 다음이 포함됩니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
의심스럽지만, 제가 이 사건에 대해index.js의 임의의 스크립트태그에index.html하지만 어떻게 이 정보가root요소를 나누다index.html잘 되고 있어서 궁금했어요.설명해 주세요.
이 명령어를 실행하여 앱을 만들었습니다.
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Create-React-App매우 흥미로운 설정을 가지고 있습니다.
나는 땅을 파기 시작했다.package.jsonnpm 스크립트start
"start" : "syslog-syslog start"
그럼 2진법으로 넘어가서react-scripts아래node_modules/.bin
관련 내용을 여기에 올리겠습니다.
switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test': {
const result = spawn.sync(
'node',
[require.resolve('../scripts/' + script)].concat(args),
{ stdio: 'inherit' }
);
이 말은 그들이 안에서 스크립트를 찾고 있다는 것을 말해줍니다.../scripts/폴더입니다.
react-scripts npm 모듈로 이동합니다.node_modules/react-scripts를 열고,node_modules/react-scripts/scripts/start.js내가 하고 있을 때부터의 파일npm start.
여기서 찾고 있던 Web Pack 설정을 찾을 수 있습니다.
그들은 특히 이 사건에 대해node_modules/react-scripts/config/webpack.config.dev.js관련 내용을 여기에 올리도록 하겠습니다.
entry: [
// Finally, this is your app's code:
paths.appIndexJs,
],
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
파일 참조처:paths.appIndexJs는 웹 팩 설정의 엔트리 파일입니다.
또한 Html WebPackPlugin을 사용하여 경로에 html을 로드합니다.paths.appHtml.
퍼즐의 마지막 조각은 당신이 올린 파일과 이것을 다시 연결시키는 것입니다.에서 관련 자료 게시paths.js
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
...
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveApp('src/index.js'),
...
}
어플리케이션 디렉토리 내에서
appHtml은 파일입니다.public/index.html
appIndexJs는 파일입니다.src/index.js
두 개의 파일이 문제가 됩니다.
와! 정말 대단한 여정이었어요.:P
업데이트 1 - 현재react-scripts@3.x
그react-scripts아래 2진법.node_modules/.bin로직을 다음과 같이 변경했습니다.기본적으로 같은 일을 하는 것.
if (['build', 'eject', 'start', 'test'].includes(script)) {
const result = spawn.sync(
'node',
nodeArgs
.concat(require.resolve('../scripts/' + script))
.concat(args.slice(scriptIndex + 1)),
{ stdio: 'inherit' }
);
dev & prod용 웹 팩 구성이 하나로 통합되었습니다.
const configFactory = require('../config/webpack.config');
HTML Web pack Plugin 구성은 다음과 같습니다.이것은, 그 위에 조건부로 실가동 구성을 추가할 필요가 있기 때문입니다.
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
경로 파일 코드에 몇 가지 업데이트가 있습니다.
module.exports = {
...
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
...
};
언급URL : https://stackoverflow.com/questions/41738421/how-react-js-index-js-file-contacting-index-html-for-id-references
'programing' 카테고리의 다른 글
| 네이티브와 안드로이드 대응 (0) | 2023.04.05 |
|---|---|
| 응답 useReducer 비동기 데이터 가져오기 (0) | 2023.04.05 |
| 재료 UI 변경 시 반응 테스트 라이브러리 구성 요소 선택 (0) | 2023.04.05 |
| BS Modal에서의 WooCommerce 고객 주문 상세 (0) | 2023.04.05 |
| Angularjs $http 투고 파일 및 폼 데이터 (0) | 2023.04.05 |