webpack을 통해 koa2 프레임워크 앱을 패키징하려면 어떻게 해야 하나요?

이 기사에서는 webpack을 사용하여 koa2 프레임워크를 패키징하고 최종 배포하는 단계를 소개합니다. 매우 실용적이며 도움이 필요한 친구들이 참고할 수 있습니다.

과거에 Koa를 사용하여 서버를 작성하는 것은 퍼블리싱이었습니다. 악몽. src의 모든 파일을 덮어써야 하고, config 구성 파일도 덮어써야 합니다. 조심하지 않으면 온라인에 다양한 문제가 보고되며 게시하기 전에 로컬로 롤백하고 조정해야 합니다. 우연히 webpack을 사용하여 koa 앱을 패키징하는 방법에 대한 기사를 보고 webpack이 백엔드도 패키징할 수 있다는 사실에 놀랐습니다. 나는 전에 이것을 생각해 본 적이 없습니다.

주요 문제

하나: node_modules의 모든 모듈이 패키징되지 않습니다

webpack의 핵심 기능은 참조된 각 모듈을 파일에 입력하고 다양한 표준화된 모듈을 모듈식 처리(webpack 사양)로 통합하는 것입니다.

그러나 노드에는 많은 수의 fs 및 경로 작업이 포함되어 있으며 이러한 fs 및 경로 작업에는 패키징이 완료된 후 작업 개체가 없으며 다양한 오류가 보고됩니다.

그래서 webpack을 패키징에 사용하는 핵심은 node_modules에 모든 모듈을 패키징하는 것을 거부하고, 상대 경로로 참조되는 파일만 하나의 파일로 패키징하는 것입니다. webapck가 패키징할 필요가 없는 모듈을 제외하기 위해 externals 속성을 제공하는 것을 발견했습니다.

좀 더 자세히 살펴보면 webpack, nodemon, babel-preset-env와 같은 모듈은 앱 개발 환경이 의존하는 패키지이며 우리 프로그램에는 이러한 모듈이 전혀 필요하지 않다는 것을 알 수 있습니다.

요약하자면, 필요한 모든 패키지만 제외하면 됩니다. 이 모듈은 package.json의 종속성 아래에 있는 모듈에 해당합니다. 종속성과 devDependency의 차이점을 이해하는 것이 중요합니다.

따라서 externals-dependents 플러그인을 사용하여 externals 속성을 사용하여 종속성을 제외할 수 있습니다.

코드:

const webpack = require('webpack');
const _externals = require('externals-dependencies')
module.exports = {
  ...
  externals: _externals(),
  ...
}

두 가지: 대상이 노드를 가리킵니다

공식 문서: Node.js와 유사한 환경으로 컴파일 가능(청크를 로드하려면 Node.js 필요 사용)

코드:

target: 'node',

세: 노드 구성 추가

공식 문서: 이 옵션은 특정 Node.js 전역 변수 및 모듈을 폴리필할지 모의할지 구성할 수 있습니다. 이를 통해 원래 Node.js 환경용으로 작성된 코드를 브라우저와 같은 다른 환경에서 실행할 수 있습니다.

코드:

node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
},

Four: babel 구성

낮은 버전의 노드가 기본적으로 async/await를 지원하지 않는 문제와 호환되도록 합니다. 여기서는 babel에 대한 babel-preset-env{"modules": false} 구성을 사용합니다. 이 구성은 es6 구문을 es5 구문으로 변환합니다(예: let 및 const를 var로 변환).

동시에 모든 async/await 함수도 폴리필에 정의된 _asyncToGenerator 함수로 변환됩니다.

사실 Promise는 비동기 함수의 기능을 구현하는 데 사용됩니다.

물론 이 함수를 실행할 때 regeneratorRuntime 함수도 필요합니다. 그래서 regeneratorRuntime 기능을 제공하기 위해 전역적으로 babel-polyfill을 도입했습니다.

참고: 노드 버전이 매우 높고 기본적으로 async/await를 지원하는 경우 babel-preset-env 및 babel-polyfill

코드:

const path = require('path');
const webpack = require('webpack');
const _externals = require('externals-dependencies')

module.exports = {
  entry: {
    app: [
      // 如果polyfill放在这里，打包的时候将不会被external,必须在js里require才能有效external
      // 'babel-polyfill',
      './src/index.js'
    ]
  },
  output: {
    path: path.resolve(__dirname),
    filename: '[name].js'
  },
  resolve: {
    extensions: [".js"]
  },
  target: 'node',
  externals: _externals(),
  context: __dirname,
  node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
  ]
}

Deployment

패키징 후 배포 시 많은 양이 필요합니다. 더 편리합니다. 온라인 뷰에 package.json, app.js 및 html만 배포하면 됩니다. 그런 다음 서버에서

1.npm install
2.npm run for

을 실행하면 서버가 백그라운드에서 실행됩니다. 업데이트하고 게시해야 하는 경우 npm run dev 또는 npm run build를 로컬로 다시 패키징하고 서버로 드래그하여 app.js를 덮어쓰기만 하면 됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

React를 사용하여 구성 요소 라이브러리를 개발하는 방법

fullpage.js를 사용하여 스크롤 구현

npm을 사용하여 Electron을 설치하지 못한 문제

위 내용은 webpack을 통해 koa2 프레임워크 앱을 패키징하려면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!