のフロントエンドを構築する方法

8719 ワード
javascript webpack gitlab テキストリンク
この記事では、GitLab CIでフロントエンドJavaScriptをビルドする方法を紹介します.我々は、アイデアから継続しますthe first article in the series , そして、我々は実際に何かを構築することができますので、それに十分なロジックを追加します.

コード
我々がするつもりであるロジックは非常に単純です-我々はちょうど現在の日付に日付入力フィールドをデフォルトします.src/index.js :
const dateInput = document.getElementById("date");

dateInput.value = new Date().toISOString().substring(0, 10);
HTML側では、src/index.html :
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Homework for life</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <h1>Homework for life</h1>

    <form>
      <input type="date" id="date" />
      <br />
      <textarea placeholder="Put your story" id="story"></textarea>
      <br />
      <button id="save">Save</button>
    </form>
  </body>
</html>
プレビュー版の主な違いは以下の通りです.
  • にありますsrc , ないpublic
  • ファイルの向こう側にIDが設定されているので、JS側から簡単にエレメントを選ぶことができます

    • webpackの設定
    アプリケーションは、Webパックを内蔵しています.JSはアプリケーションのエントリポイントとして定義されます.WebPackはJavaScriptフォームを構築し始めるでしょう.index.html はHtmlWebpackPlugin テンプレート-プラグインをインポートするHTMLファイルを生成するために使用します.webpack.config.js :
    const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./public"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
};

    依存
    ビルドを実行するには、次の依存関係をインストールする必要があります.
    $ npm install --save-dev html-webpack-plugin webpack webpack-cli

    ビルドスクリプト
    {
  ...
  "scripts": {
    ...
    "build": "webpack"
    それは私たちをビルドできるようになりますnpm run build - プロジェクト内のビルディングツールを置き換えるときに便利です.新しいコマンドを入力することなく学習します.

    CIの設定
    ビルドを更新するには、設定できます.gitlab-ci.yml です.
    pages:
  image: node:14
  artifacts:
    paths:
      - public
  script:
    - npm ci
    - npm run build
  • pages: - ジョブ名はまだgitlabページに展開したいので、このように滞在する必要があります
  • image: node:14 - それは私たちのスクリプトを実行できるDockerイメージを選択します.この場合、どんな現代のノードもうまく動作するはずです.
  • artifacts: ... - ページ展開用
  • scripts: - ビルドコマンド
  • - npm ci - 各パッケージの正確なバージョンをインストールしますpackage-lock.json
  • - npm run build - ビルドスクリプト

    • 作業ビルド
    すべてが予想通りに行った場合、CIランは以下のようになります.


    リンク
  • repository
  • branch
  • free webpack course
  • pre register for free GitLab video course

    • 概要
    この記事では、我々のシンプルな展開をGitlabページにどのように構築し展開するかを見ました.
    アジュール・サイン.ネット5.0
    TIL 11,12