Parcel multiple entry points for Google Chrome extension

user_10631530 0
Viewed 1158

I'm creating a new Chrome extension. I introduced Parcel bundler for module bundling and TypeScript support.

I want build

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

into

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

/src/index.html imports index.ts in the same directory

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

This will produce following output:

/dist
  /background-script
    index.js
  /browser-action
    index.html
  /content-script
    index.js
  browser-action.***.js
parceljs google-chrome-extension
2 Answers

Try using something like this in package.json:

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

It will take something like:

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

  /project2
    main.js

In projects1 main.js is importing utils.js and constants.js and does some other stuff. Then the build command runs, it will minify, polyfill, transpile into the main.js file in the /build folder.

And will generate a folder structure like:

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

Good news! Parcel 2 has a transformer for WebExtensions:

.parcelrc file:

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

Install command:

npm install parcel @parcel/config-webextension@next

Build command:

parcel build manifest.json

✨ Built in 1.18s

It will pick up every files mentioned in manifest.json plus some other files like what's under _locales

user_2889060
Related