为Google Chrome扩展程序打包多个入口点

Question

我正在创建一个新的Chrome扩展程序。我介绍了用于模块捆绑和TypeScript支持的Parcel捆绑器。

我要建造

/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

在projects1中，main.js导入utils.js和constants.js并执行其他一些操作。然后运行build命令，它将最小化，填充并转换为/ 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 下的内容