Hello everybody!
I am working on a Vite / JavaScript / Webflow template so it's easier to use JavaScript inside Webflow, and of course GSAP.
I have GSAP as a dependency (thank you GS 😍), but when trying to call gsap this namespace gsap is the first one that pops up, so when hitting 'tab' to expand & auto-import, nothing happens. Now you'd say this is not a real problem, and you would be right, but I love better developer experience, and I want to make it easier for non-import-modules guys to get started easily.
My jsconfig.json looks like this:
{
"compilerOptions": {
"target": "ES2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"removeComments": true /* Strict Type-Checking Options */,
"strict": true /* Enable all strict type-checking options. */,
/* Additional Checks */
"verbatimModuleSyntax": true,
/* Module Resolution Options */
"moduleResolution": "node",
"resolveJsonModule": true,
/* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
/* Advanced Options */
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ /* Do not emit comments to output. */
}
}
There are a couple of options which I don't totally understand -
I saw it in a similar TypeScript/Webflow template (taken from tsconfig.json), where calling gsap popped the gsap library & auto-autoimport in the first position of the expanded menu (pic 2)
Edit*: adding vite.config.js code in case it's needed.
import { defineConfig } from "vite";
import eslint from "vite-plugin-eslint";
import InjectHMRPlugin from "./config/vite-plugin-inject-hmr.js";
import RedirectRootRequestsPlugin from "./config/vite-plugin-redirect-root-requests.js";
export default defineConfig(({ command }) => {
let config = {
// Shared configuration across all modes
resolve: {
alias: {
// Make root ("/") point to "src" folder
"/": "src",
},
},
optimizeDeps: {
exclude: ["jquery"],
},
server: {
host: "localhost",
port: 3000,
},
build: {
rollupOptions: {
// Direct string paths without path.resolve
input: {
main: "./src/main.js",
about: "./src/about.js",
},
external: ["jquery"],
},
},
// ...other shared configurations...
};
// Extend config for development environment
if (command === "serve") {
config = {
...config, // keep the shared config
plugins: [InjectHMRPlugin(), RedirectRootRequestsPlugin(), eslint()],
server: {
...config.server, // keep the shared server config
hmr: {
port: 3000, // Can be omitted if it's the same as server port
},
},
};
}
return config;
});
Thank you GreenSock team!
❤️
