간단한 JavaScript 파이핑 및 웹 패키지

11362 단어 javascriptwebpack

홈페이지 소개
webpack는 거칠기로 유명하다.만약 웹 패키지로 만들어진 프로젝트의 코드를 훑어보았다면, 이것은 믿기 어려울 수도 있습니다.촬영해 봐. Next.js 원본 코드가 있어. an entire directory to manage webpack configuration
이런 복잡성은 어느 정도에 그것의 힘에 기인한다.웹팩은 많은 일을 할 수 있습니다.
다행히도, 이 무료 소스 오픈 도구를 구축한 우수한 사람들은 모든 버전이 이전 버전보다 사용하기 쉽도록 노력해 왔다.이제 아주 간단하게 시작할 수 있습니다. 아주 적은 설정만 있으면 됩니다.따라서 웹팩의 위력을 가장 작고 간단한 항목에서 증명할 수 있다.

저희가 뭘 만들까요?
우리 하자.여러 개의 JavaScript 모듈을 하나의 파일에 묶어 HTML 페이지에서 파일을 불러올 수 있는 아주 간단한 구축 파이프를 구축합니다.
끊기면 언제든지 볼 수 있다the full code example.

알겠습니다!
도중에 우리는 반드시 큰 난제를 극복해야 한다.출력 패키지가 모호하고 익명입니다.이것은 기본적으로 우리가 그것을 방문할 수 없다는 것을 의미한다.설령 우리가 할 수 있다 하더라도, 우리는 어떻게 내비게이션을 하는지 모를 것이다.
예를 들어, 우리는 외부 위치 (예를 들어 HTML 파일) 에서 연결된 코드에 접근하기를 원하기 때문에, 주요 내보내기를 App 대상에 불러오고, 이 주요 HTML 파일에서 대상에 접근할 수 있습니다.
구체적으로 말하자면, 이 예에서, 우리는 호출 App.Logger.sayHi() 을 하고, 프린트 "Hi!" 를 컨트롤러에 볼 수 있기를 희망한다.
가자!

1단계:설정
만약 네가 프로젝트가 준비되었다면, 다행이다.없는 경우 언제든지 follow my steps to get started에 문의하고 다음 지침을 첨부하십시오.
다음은 우리가 사용할 의존항입니다.
  • http-server
  • webpack
  • webpack-cli
    • 다음은 package.json에 추가할 스크립트입니다.
    // package.json

{
  // ...
  "scripts": {
    "build": "WEBPACK_ENV=production webpack",
    "dev": "webpack",
    "serve": "http-server dist -p 8000"
  }
}

    2단계: JavaScript 파일 추가
    이제 몇 개의 JavaScript 파일을 추가합니다.먼저 Dell 레코더src/modules/logger.js:
    // src/modules/logger.js

const sayHi = () => {
  console.log("Hi!")
}

export { sayHi }
    그리고 우리의 주 파일 ((src/main.js 은 Logger 대상을 내보내는 것을 책임질 것입니다.
    // src/main.js

import * as Logger from "./modules/logger"

export { Logger }
    주의: 만약 이것이 더 큰 웹 프로젝트라면 src 디렉터리에 더 많은 파일이 있다면, 이 파일들을 다른 플러그인 위치에 두기를 원할 수도 있습니다. 예를 들어 js 디렉터리에 두기를 원할 수도 있습니다.

    3단계: 웹 패키지 구성 추가
    다음은 웹 페이지 설정을 추가합니다.이 코드 예제에 주석을 달면 다음 사항을 볼 수 있습니다.
    // webpack.config.js

const path = require("path")
// Used to determine whether to watch the files or build.
const env = process.env.WEBPACK_ENV || "development"

module.exports = {
  // The main file for the bundle.
  entry: "./src/main.js",
  output: {
    // Name of the bundle file.
    filename: "bundle.js",
    // Directory in which the bundle should be placed.
    // Here we're saying `dist/js/bundle.js` will be our bundled file.
    path: path.resolve(__dirname, "dist/js"),
    // These two library items tells webpack to make the code exported by main.js available as a variable called `App`.
    libraryTarget: "var",
    library: "App"
  },
  mode: env,
  // If we're in development mode, then watch for changes, otherwise just do a single build.
  watch: env !== "production"
}
    요약:
  • main.js는 주요 목표 파일로 dist/js/bundle.js에 귀속됩니다.
  • 발main.js수출은 App변수로 전 세계에서 제공될 것이다.
  • WEBPACK_ENV가 production 이외의 값으로 설정되면 웹 패키지는 변경 사항을 감시합니다.WEBPACK_ENV가 production로 설정되면 패키지를 생성하고 실행을 중지합니다.package.json에 추가된 스크립트에서 이 변수를 자동으로 설정합니다.

    • 4단계:HTML 추가
    이제 간단한 index.html 파일을 dist 디렉터리에 추가하고, 묶인 JS 파일은 이 디렉터리에 저장합니다.
    <!-- dist/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Webpack ES6 Pipeline</title>
  </head>
  <body>
    <p>Hello there.</p>

    <script src="/js/bundle.js"></script>
    <script>
      App.Logger.sayHi()
    </script>
  </body>
</html>
    대부분의 실제 상황에서, 파일을 여기에 놓을 수도 있고, 정적 사이트 생성기나 사용자가 사용하고 있는 다른 프레임워크에서 제공할 수도 있습니다.
    이 예에서 우리는 파일을 여기에 두었다. 마치 그것이 이미 구축된 것처럼. 그러면 우리는 모든 설정을 걱정할 필요가 없이 집중할 수 있다.

    5단계: 그것을 운행하라!
    실제로 우리는 두 개의 명령을 실행해야만 그것이 일을 할 수 있다.먼저 JavaScript 패키지를 구성합니다.
    $ npm run build
    그런 다음 웹 서버를 실행할 수 있습니다.
    $ npm run serve
    지금localhost:8000을 방문하여 브라우저의 컨트롤러를 열면 메시지"Hi!"가 출력될 것입니다!
    웹 서버를 다시 로드하지 않고 JavaScript를 변경하고 반영을 보려면 두 개의 터미널 탭을 사용할 수 있습니다.한 실행npm run serve은 웹 서버를 실행하고 다른 실행npm run dev은 자바스크립트의 변경과 재건을 감시합니다.

    도구책
  • Full code example
    • 이것이 바로 웹 패키지를 사용하기 시작하는 데 필요한 모든 것이다.간단한 기초부터 웹 패키지를 이해하고 사용하는 관건이다.이제 너는 이 기초 위에서 정말 훌륭하고 유일무이한 것을 창조할 수 있다.
    하위 도 메 인 이름 매 거 진, 탐지 도구 AQUATONE 사용 안내
    코딩테스트(프로그래머스 1단계(17번: 가운데 글자 가져오기)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage