をビルドするには、クロムエクステンション

23970 ワード
preact extension tailwindcss parcel テキストリンク

背景


最近、私自身のためにクロムエクステンションヘルパーツールを構築するtoy projectを始めました.新人開発者として、プロジェクトを設定するのに少し時間がかかりました.それで、私はそれが学習ノートとしてこのポストで文書化する方がよいと思います.

なぜ包み+ preact + tailwindcssスタック？


preactとtailwindcssは、軽量化のような小さなアプリケーションに適しています軽量です.私は前に小包を試してみませんが、それは人気のウェブパックよりも優れたベンチマークを持っていると主張されています.正直に言うと、私はそれについて確かではありませんが、小包のゼロ構成は本当に私を得ました.では、なぜそれを行かない?
また、詳細については、上記のリンクから公式サイトを確認してください.

セットアップを始める


セットアップの前に、私は彼らを通過しようとしていますが、私はthis repoでこのポストで言及されたすべてのファイルを準備しました.
セットアップを始めましょう!すべては空のディレクトリから始まります.

1 .基本ファイルパッケージを準備します。マニフェスト.JSON


糸でpackage.jsonのinitに、すべての質問にデフォルトの答えはいに旗-yを加えてくださいyarn init -yその後、manifest.jsonを作成します.
{
  "name": "Chrome Extension boilerplate",
  "version": "1.0",
  "description": "Chrome Extension boilerplate with Parcel + Preact + TailwindCSS",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "static/icon_32.png"
  },
  "icons": {
    "48": "static/icon_32.png"
  },
  "permissions": [
    "tabs",
    "contextMenus"
  ],
  "background": {
    "scripts": ["./src/background.js"]
  },
  "options_ui": {
    "page": "./src/options.html",
    "open_in_tab": true
  }
}
また、非常に単純な内容で他の3つのファイル/src/background.js、/src/options.html、/src/main.htmlを作成します/src/background.js
// /src/background.js
// create context menu item, with simple onclick event that brings users to the main.html
chrome.contextMenus.create({
  id: "main_page",
  title: "Open Main Page", 
  onclick: () => {
    chrome.tabs.create({  
      url: chrome.runtime.getURL("src/main.html")
    });
  },
  contexts: ["browser_action"]
}, () => {});
/src/main.html
<!-- /src/main.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Main</title>
  </head>
  <body>
    this is main page
  </body>
</html>
/src/options.html
<!-- /src/options.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Options</title>
  </head>
  <body>
    this is options page
  </body>
</html>

2 .小包を設定する


パッケージパッケージを追加しますyarn add parcel-bundler --dev(オプション)静的ファイルを生成するためのヘルパーパッケージを生成します.yarn add parcel-plugin-static-files-copy --devそして"scripts"と"staticFiles"を/package.jsonに追加した.
{
  "name": "setup-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "clear": "rm -rf dist .cache",
    "watch": "yarn clear && parcel watch src/{main.html,options.html,background.js} -d dist/src --public-url ./ -t node --bundle-node-modules",
    "build": "yarn clear && parcel build src/{main.html,options.html,background.js} -d dist/src --public-url ./"
 },
  "staticFiles": {
    "staticPath": [
      {
        "staticPath": "static",
        "staticOutDir": "../static/"
      },
      {
        "staticPath": "manifest.json",
        "staticOutDir": "../"
      }
    ]
  },  
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-static-files-copy": "^2.5.0",
  }
}
注意:静的ファイルプラグインをインストールしないと決めた場合は、"scripts"を変更することによって自分自身で実行します.
"scripts": {
  "clear": "rm -rf dist .cache",
  "watch": "yarn clear && mkdir dist && cp -R static dist/static && cp manifest.json dist/ && parcel watch src/{records.html,options.html,background.js} -t node --bundle-node-modules -d dist/src --public-url ./",
  "build": "yarn clear && parcel build src/{records.html,options.html,background.js} -d dist/src/ --public-url ./ && cp -R static dist/static && cp manifest.json dist/"
},

セットアップのテスト


では、以下のようにします.yarn build/distフォルダが生成され、ブラウザのエクステンションページ(Chromeブラウザのchrome://extensions/)と“Load Unpack”に移動し、
コードが動作しているかどうかを調べます.
拡張子ページの/distフォルダーのアンロード

IIオープン拡張コンテキストメニューを開き、この「開いているメインページ」をクリックします

内容をチェックして、祝う🎉

3 .準備をする


パッケージを追加する/distその後、yarn add preactに"alias"を加えます.
"alias": {
  "react": "preact/compat",
  "react-dom/test-utils": "preact/test-utils",
  "react-dom": "preact/compat"
}
ファイルを作成
{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h",
        "pragmaFrag": "Fragment"
      }
    ]
  ]
}
最後にファイルpackage.json :
// /src/js/app.js
import { h, render, Component } from "preact";

let Header = () => {
  return (
    <header>This is header by Preact</header>
  )
}

document.addEventListener("DOMContentLoaded", () => {
  render(<Header />, document.body);
});
そして、.babelrcにボディを変更するなら、
<body>
  <script src="./js/app.js"></script>
</body>
再構築し再確認🎉🎉

4 . TarwindCSSの設定


パッケージを追加します/src/js/app.jsTailWinCSS用の設定ファイルmain.html(この前にyarn add tailwindcss --devまでなければならないかもしれません)
その後、npx tailwindcss init -pとyarn global add tailwindcssが生成されます.
// /postcss.config.js
module.exports = {
 plugins: {
   tailwindcss: {},
   autoprefixer: {},
 },
}
あなたはpostcss.config.jsを解凍し、追加する必要があります
purge: [
  './src/**/*.js',
],
以下のようにtailwind.config.jsになります.
// /tailwind.config.js
module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [
    './src/**/*.js',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
それはほとんど行われます、しかし、私はよりきちんとしたスタイルシートのために入れ子になったCSSを書くのが好きです.しかしながら、私はPostcssプラグインpurgeLayersByDefault: true,の設定に失敗しました.今回失敗してうれしいです、私はすぐに小包はbuilt-in support for LESSを実現しました!
それで、我々はちょうど前進しなければならなくて、tailwind.config.jsを作成しなければなりません:
/* /src/style/app.less */
@tailwind base;
@tailwind components;

/* remember to put customize css before importing the tailwind utilities */
body {
  header { /* test nested feature */
    @apply flex items-center justify-center text-lg; /* test tailwind utilities */
  }
}

@tailwind utilities;
また、postcss-nestedで動作するかどうかを調べるために、プリウス/src/style/app.lessにいくつかのスタイルを追加します.
<header class="h-24 bg-blue-200">This is header by Preact</header>
スタイルシートを<header>にリンクすることを忘れないでください.
<link rel="stylesheet" href="./style/app.less">
私たちの最後のテストを行う、フレックスボックス作品+テキストは大+背景色淡青色と高さは右、素晴らしいです🎉🎉🎉

問題と反射


複数エントリポイント


したがって、通常、バンドルツールはコンパイルのための1つのエントリポイントをとります.app.jsがmain.html、manifest.json、main.htmlを含むファイルパスを定義しているので、私はそれらをすべてエントリポイントとしていると思います.私は実際にそれを行う方法を把握するのにかなりの時間がかかったので、私は実際に上記のセットアップ中にoptions.jsと有意義な何かをしていないにもかかわらず、私はここで私の大きなレッスンの一つであるので、それを文書化したいと思います.

問題2 :小包版は、最新のPostcssバージョン8をサポートしません


それはトラブルに私を入れていた、私はbackground.js/options.html/postcss-nestedのような様々なPostcssプラグインを使用して私を制限した.私はこれらのプラグインの古いバージョンを使用してみましたが、それは奇妙に動作していませんでした.それから、私は入れ子になっているCSSをする異なった方法を理解します:より少ない使用!以下のための小包ネイティブサポートは、ちょうど驚くべきです.また、私たちは、CookClipの最新バージョンでは、現在のpostcss-purgecssで簡単な構成設定によってパージCSSを行うことができます.

ボーナス問題3：Windows 10で発展すること


通常、私は自分の職場でMacで開発をしていますが、自宅ではWindowsを使用しているため、パッケージをインストールしても問題が発生します.だから私はこれを克服するためには、Dockerを使用しています.postcss-import
# pull official base image
FROM node:10-slim

WORKDIR /app

# install parcel
RUN yarn global add parcel-bundler

# install app dependencies
COPY package.json ./
RUN yarn install

# add app
COPY . ./


# Windows steps:
# Step 1: from host to container
# docker cp . demo-container:app/

# Step 2: build in container
# yarn build

# Step 3: from container to host
# docker cp demo-container:app/dist .
私は、ファイルを前後にコピーするのが便利でないかもしれませんが、私はtailwind.config.jsをコンパイルするだけのVMのようにそれを使用します.私が考えるNOOBプログラマのために十分良い.
こんな長いポストを読んでくれてありがとう.
プロジェクトを設定する私の方法は絶対に完全ではありません、そしてIMOはそれがDockerの部分でちょっと愚かです.
ようこそあなたのコメントやフィードバックを残して、彼らはより良い開発になるための私を助ける!👍👍
非同期通信について初投稿
コマンドプログラミングvs宣言プログラミング