Git Product home page Git Product logo

milankovacic / vite-plugin-externalize-dependencies Goto Github PK

View Code? Open in Web Editor NEW
48.0 2.0 2.0 402 KB

This repository provides a Vite plugin that allows you to set dependencies as external during development. This is essential when using import maps, ensuring that dependencies are not bundled, but are instead managed and loaded externally.

License: MIT License

HTML 4.56% TypeScript 74.81% JavaScript 19.75% Shell 0.88%

vite-plugin-externalize-dependencies's Introduction

Vite Plugin Externalize Dependencies npm

A simplified plugin for Vite that allows you to exclude specific dependencies from the Vite bundle during development.

The following errors/warnings are supressed:

  • The entry point [moduleName] cannot be marked as external
  • Do not know how to load path: [namespace:moduleName]
  • Failed to resolve import [dependency] from [sourceFile]. Does the file exist?
  • The following dependencies are imported but could not be resolved: [dependency] (imported by [sourceFile])

Table of Contents

Installation

To install the plugin, use npm:

npm i vite-plugin-externalize-dependencies --save-dev

Usage

After installing the plugin, import it, and add it to Vite configuration:

import { defineConfig } from "vite";
import externalize from "vite-plugin-externalize-dependencies";

export default defineConfig({
  plugins: [
    externalize({
      externals: [
        "react", // Externalize "react", and all of its subexports (react/*), such as react/jsx-runtime
        /^external-.*/, // Externalize all modules starting with "external-"
        (moduleName) => moduleName.includes("external"), // Externalize all modules containing "external",
      ],
    }),
  ],
});

Modules can be externalized by name (exact match), by regex, or by a custom function (returning true to externalize the module). The plugin will automatically externalize all subexports of a module, such as react/jsx-runtime.

Requirements

The plugin is intended to be consumed by Vite.

Contributing and Development

Contributions are welcome! If you wish to contribute, you can use the following npm commands to help facilitate your development process:

  • dev: Serve index.html for development testing.
  • build: Build the plugin.
  • test: Run tests to verify expected outputs.

Use them as follows:

npm run dev
npm run build
npm run test

Please feel free to open a pull request with your changes or improvements.

Known Issues & limitations

This plugin is designed to work during development. For production, users should manually configure build.rollupOptions.external in Vite.

Support

If you encounter any problems or have any issues, please open a new issue in the GitHub repository.

License

This project is licensed under the MIT License.

vite-plugin-externalize-dependencies's People

Contributors

milankovacic avatar dependabot[bot] avatar github-actions[bot] avatar wassim-ben-amor avatar

Stargazers

YunHan avatar James avatar Oskar Hulter avatar Jaya Krishna Namburu avatar  avatar Jonathan Baldwin avatar  avatar Eric Burel avatar Karel Frederix avatar Mr.Liu avatar Elvis Duru avatar  avatar roll avatar Rodney Folz avatar Dinh-Van Colomban avatar Ivan Pešić avatar acodingwitch avatar  avatar Sambath Kumar Logakrishnan avatar Marcos Viana avatar Jonas Kello avatar  avatar Youness Hakky avatar James Restall avatar Fallup avatar Brad Pillow avatar Matthias Lindinger avatar Cesar Gomez avatar 서동휘 avatar Stanislav Dolgachov avatar José Pablo Ramírez Vargas avatar Seth Vincent avatar Duc-Thien Bui avatar Github Jobs Developers avatar sambit avatar  avatar flumpus avatar Alan Meira avatar Saul Garcia avatar 江程训 avatar Nick Tomlin avatar Eirik Strøm avatar Javier Buil avatar  avatar  avatar Yann Normand avatar  avatar Taisei Mima avatar

Watchers

 avatar José Pablo Ramírez Vargas avatar

vite-plugin-externalize-dependencies's Issues

Issue when `resolvedExternals` is empty

Hello,
I am facing an issue using the library on a monorepo where I have many vue3 applications.
The issue happens when there is no matched externals.

After debugging, I have found that if resolvedExternals remains as an empty set. The regex to be used will be /\/@id\/()/g. In this case it will match any line that contains /@id/....
Example: import _export_sfc from "/@id/__x00__plugin-vue:export-helper";

I think we can fix this issue by simply verifying that the resolvedExternals is not empty before doing the replacement. I can push a PR to fix it.

Plugin not rewriting references? Maybe user error

Hi,

I'm trying to use this plugin for my FoundryVTT plugin. Before adding the plugin my .mjs had

import { createRoot } **from "react-dom/client"**;
import { printf, toConsole } from "./fable_modules/fable-library.4.4.1/String.js";
import { createElement } **from "react"**;

which cannot load in the browser because the browser doesn't know about my node_modules directory. After adding

**import externalize from "vite-plugin-externalize-dependencies";**
const config: UserConfig = ({
  **plugins: [react(),externalize({ externals: ["react", "react-dom"] })],**

I was hoping my imports would be different, e.g. "from ./react", so that I could gradually tweak it into finding the actual module path somehow. But my Program.js is unchanged.

Am I expecting too much from the vite plugin?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.