包裹 Google Chrome 扩展的多个入口点

Question

我正在创建一个新的 Chrome 扩展。我引入了用于模块捆绑和 TypeScript 支持的 Parcel bundler。

我要建造

/src
  /background-script
    index.ts
  /browser-action
    index.html
    index.ts
  /content-script
    index.ts

进入

/dist
  /background-script
    index.js
  /browser-action
    index.html
    index.js
  /content-script
    index.js

/src/index.html 在同一目录中导入 index.ts

parcel watch src/background-script/index.ts src/content-script/index.ts src/browser-action/index.html --no-hmr --out-dir dist --public-url .

这将产生以下输出：

/dist
  /background-script
    index.js
  /browser-action
    index.html
  /content-script
    index.js
  browser-action.***.js

Answer 1

尝试在 package.json 中使用类似的东西：

"build": "parcel build ./src/**/main.js ./src/**/main.scss --out-dir build --no-content-hash --no-source-maps",

需要的时间如下：

/src
  /project1
    /components
      utils.js
      constants.js
    main.js

  /project2
    main.js

在项目 1 中 main.js 正在导入 utils.js 和 constants.js 并做一些其他事情。然后构建命令运行，它会缩小，polyfill，转译到 /build 文件夹中的 main.js 文件。

并将生成如下文件夹结构：

/build
  /project1
    main.js
  /project2
    main.js

Answer 2

好消息！地块 2 有一个 transformer for WebExtensions:

.parcelrc 文件:

{
    "extends": "@parcel/config-webextension"
}

安装命令：

npm install parcel @parcel/config-webextension@next

构建命令：

parcel build manifest.json

✨ Built in 1.18s

它将获取 manifest.json 中提到的所有文件以及一些其他文件，例如 _locales

下的文件

Parcel multiple entry points for Google Chrome extension