Using the src
directory for source code
Instead of having your source codes in the root directory, you can put them in a child src
directory.
--with-src
Creating a Plasmo project with an src
directory setup is as simple as:
pnpm create plasmo --with-src
The command above utilizes Plasmo's example template feature.
Please ensure that ALL source files including Plasmo's entry files such as popup.tsx
, options.tsx
, background.ts
, contents/*
etc. are in the src
directory. Otherwise, Plasmo WILL NOT know where to find the entry files, resulting in an empty extension!
This customization only resolves ~
to /src
for source code
modules. Please see this note about tilde import
resolution.
Manual Setup
First, copy all your source code files into the src
directory. Then, for TypeScript to work correctly, you will need to point the resolved paths
for the ~*
prefix in the tsconfig.json
file to "./src/*"
.
The new configuration looks like this:
{
"extends": "plasmo/templates/tsconfig.base",
"exclude": ["node_modules"],
"include": [".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
"compilerOptions": {
"paths": {
"~*": ["./src/*"]
},
"baseUrl": "."
}
}
See with-src (opens in a new tab) for a full example.