esbuild 은 속도가 매우 빠른transpiler,bundler,minifier로 매우 간결한 API를 가지고 있다.Go로 작성되었습니다. 이것은 컴파일된 바이너리 파일일 뿐 의존 관계가 없다는 것을 의미합니다.
react-native-web (RNW)은 웹 전단에서 react-native 원어를 사용할 수 있는 라이브러리입니다.
새 사용자에게는 RNW를 사용하는 도구를 설정하는 데 문제가 있을 수 있습니다.
RNW에는 전송, 번들 및 축소 코드 (거의 모든 React 항목의 표준) 외에 두 가지 요구 사항이 있습니다.

별칭 react-native ~ react-native-web (다른 라이브러리에서도 별칭이 필요할 수 있음)

은 .web.js을 사용하여 .android.js, .ios.js, .native.js의 해석 확장을 사용합니다.

The most common ways to do this은 Babel 및 Webpack을 직접 구성하거나 create-react-app(CRA)을 사용하거나 expo을 사용합니다.다른 라이브러리에 대한 별칭을 만들려면 CRA에서 팝업하고 Expo에서 expo customize:web을 실행해야 합니다.이 두 가지 상황에서 최종적으로 Webpak 프로필을 처리할 것입니다.esbuild의 속도 성능과 사용 단순성을 고려하여 RNW와 함께 사용할 수 있습니까?그래, 한번 해보자.

esbuild 설치

먼저 Esbuild를 설치합니다.

npm install -g esbuild

그것은 현지에서 설치할 수 있지만, 전 세계적으로 나에게 더욱 의미가 있다.

Esbuild 테스트를 위한 새 항목 만들기

우선, 우리는 create-react-native-app을 사용하여 새로운 RNW 프로젝트를 만들 것입니다. 이 프로젝트는 매우 간단한 템플릿을 제공합니다.

npx create-react-native-app -t blank rnw-esbuild

이 템플릿에는 RNW 프로젝트를 실행하기 위해 react-native-web, react-dom 및 Expo 구성 파일도 설치됩니다.
간단한 템플릿:

import { View, Text } from "react-native";
export default function App() {
  return (
    <View style={...}>
      <Text>Universal React with Expo</Text>
    </View>
  );
}

Expo 사용 여부를 테스트하려면 다음 명령을 실행합니다.

npm run web

네, 엑스포 덕분에 모든 것이 예정대로 진행되었습니다.

이제 Esbuild를 사용해 보겠습니다.

색인을 만듭니다.html

Esbuild에서 생성된 번들 파일을 테스트하려면 index.html이 필요합니다.
먼저 새 디렉토리를 만듭니다.

mkdir web

여기서 index.html 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      html,body, #root {height: 100%;}
      body {overflow: hidden;}
      #root {display: flex;}
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

모든 것이 질서정연하니 우리는 계속 전진합시다.

esbuild 사용

별칭 구성

Esbuild는 tsconfig.json/jsconfig.json을 사용하여 react-native의 별명을 react-native-web으로 지정합니다.따라서 다음과 같이 파일을 만들거나 업데이트해야 합니다.

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "react-native": ["./node_modules/react-native-web"]
    }
  }
}

Esbuild 구성

esbuild 및just React를 사용한 처방은 다음과 같습니다.

esbuild app.jsx --bundle --outfile=out.js --define:process.env.NODE_ENV='"production"' --loader:.js=jsx

--loader:.js=jsx이 아닌 js으로 확장할 때만 jsx 옵션이 필요합니다.--define 옵션은 구축할 때 표현식을 true 또는 false으로 변환합니다. 구체적으로는 process.env.NODE_ENV의 값에 따라 달라집니다.
RNW 프로젝트를 구축하는 데 필요한 구체적인 변경 사항을 살펴보겠습니다.

은 하나의 엑스포 프로젝트에 대해 입구점이 node_modules\expo\AppEntry.js에 있기 때문에 우리는 입구점을 그것으로 변경해야 한다.

은 파일 확장자를 해석하는 순서를 정의하기 위해 다음과 같은 옵션을 사용합니다. --resolve-extensions=.web.tsx,.web.ts,.web.jsx,.web.js,.tsx,.ts,.jsx,.js.

은 typescript 프로젝트가 아닌javascript 프로젝트를 실행하기 때문에 Esbuild jsconfig.json 파일의 위치를 알려야 합니다. 옵션은 --tsconfig입니다.

여기에는 --minify 및 --sourcemap 옵션도 포함될 수 있습니다.
이러한 요점을 공고히 하면 우리는 최종 지휘권을 가진다.

esbuild --bundle node_modules/expo/AppEntry.js --outfile=./web/bundle.js --resolve-extensions=.web.jsx,.web.js,.jsx,.js --loader:.js=jsx  '--define:process.env.NODE_ENV="production"' --tsconfig=jsconfig.json --minify --sourcemap

이 명령을 실행하면 web 디렉터리에서 생성된 파일을 볼 수 있습니다.

프로젝트 실행

구축된 후에 우리는 그것을 모든 http 서버에 사용할 수 있습니다.우리는 servor 을 사용할 것이다

servor web --reload --browse

그렇습니다.매우 간단한 프로젝트에 그것은 작용을 했다.

Esbuild javascript API

명령줄 대신 javascript API에서 Esbuild를 사용할 수 있습니다.이 경우 이 파일에서 위의 명령을 대체할 수 있습니다.

require('esbuild').build({
  entryPoints: ['./node_modules/expo/AppEntry.js'],
  bundle: true,
  outfile: './web/bundle.js',
  tsconfig: 'jsconfig.json',
  define: {'process.env.NODE_ENV': 'production'},
  resolveExtensions: ['.web.jsx','.web.js','.jsx','.js',],
  minify: true,
  sourcemap: true
}).catch(() => process.exit(1))

결론

Babel과 Webpack의 사용은 수백 개 또는 수천 개의 파일을 설치하는 데 많은 의존 사항을 포함한다.
Esbuild를 사용하면 바이너리 파일 하나, 프로필 (tsconfig/jsconfig) 의 작은 변경 사항, 명령줄을 실행하면 매우 간단한 RNW 프로젝트를 구축할 수 있습니다.
다음 글에서 우리는 엑스포와 메트로와 비교하여 Esbuild의 성능을 평가할 것이다.
당신은 repository에서 본문에서 사용하는 코드를 찾을 수 있습니다.

Reference

이 문제에 관하여(sbuild&react native web-I), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dalcib/esbuild-react-native-web-i-afn

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

sbuild&react native web-I