Developing front-end libraries using the jspm workflow

What is the best way to convert a library written in TypeScript to ES5?

While JSPM documentation focuses on web apps (such as with jspm bundle-sfx), the information I've found on Google seems more suited for a web app workflow rather than a library workflow.

In my projects, I have:

  • A dependency on react, flux, and jquery, all installed through jspm and configured in config.js

  • The source .tsx/.ts files are located in a src/ directory, along with their transpiled .js files

  • Successfully created a bundle using jspm bundle, though it requires users to use SystemJS

I'm looking to bundle the entire content under src/ into a single file without including libraries like react or jquery. How can this be achieved?

Initially, I attempted 

jspm bundle src/<MY_MAIN.js> - react - jquery <OUT.js>
which worked but still necessitated a module loader for accessing exported symbols in MY_MAIN.js. Ideally, I'd like to offer users the option to manually import my library using <script> tags. However, self-executed bundles don't seem to function properly as no symbol is globally accessible when loaded via the <script> tag, and excluding the framework code is proving tricky.

javascriptbuildecmascript-6systemjsjspm

Answer №1

Let's discuss three different strategies tailored to various end-user workflows

1. Utilizing the <script/> tag method

In this approach, you create a file .ts that exports the key symbols of the library:

// Main.ts
import {MyLib} from "./components/MyLib";
import * as React from "react";
import * as ReactDOM from "react-dom";

/**
 * Exporting for browsers
 */

(function (window) {
    window.MyLib = MyLib;
    window.React = window.React || React;
    window.ReactDOM = window.ReactDOM || ReactDOM;
})(typeof window !== "undefined" ? window : {});

Afterwards, execute 

jspm bundle-sfx Main.js my-lib.sfx.js
. The same process applies to browserify, but with commonjs style require() instead of ES6 style import

2. Combine & Condense source files using traditional gulp/grunt

This follows the classic workflow we are accustomed to

3. Assuming ES6 compatibility for applications utilizing the library

Distribute the code in ES6/TS format along with .d.ts and anticipate that the user will also implement jspm/system or an eventual ES6 module loader technique to import your module

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a table row as a counter in HTML

I am looking for a way to automatically assign IDs to table rows using XSLT in a systematic manner. The idea is to have the ID consist of a string followed by a counter, like this: <table> <tr id="Row1"> # it can be only a number => id=" ...

javascripthtmlxmlxslt

After refreshing, the other items stored locally are lost once a new item is added

After refreshing the page, only the item added remains and the rest are lost. How can I make sure all items persist? Here is my code snippet: let buttonsDom = document.querySelectorAll(elementsStr.itemsBtn) const buttons = [... buttonsDom] window.addEven ...

javascriptnode.jsexpress

Modification of text within a text field via a context menu Chrome Extension

Currently, I am embarking on my first endeavor to create a Chrome extension. My goal is to develop a feature where users can select text within a text field on a website using their mouse and have the ability to modify it by clicking on a context menu. Be ...

javascriptgoogle-chrome-extension

What is the best way to retrieve all the keys from an array?

I am looking to retrieve the address, latitude, and longitude data dynamically: let Orders= [{ pedido: this.listAddress[0].address, lat: this.listAddress[0].lat, lng: this.listAddress[0].lng }] The above code only fetches the first item from the lis ...

javascriptangularjstypescript

"Utilizing JavaScript, you can remove an element by clicking on the outer element within the

I need the functionality where, when a user clicks on an input type="checkbox", a corresponding textarea is displayed. Then, if the user clicks anywhere except for that specific textarea, it should be hidden. Can someone assist me with implementing this fe ...

javascripthtmljquerycss

Is it possible to nest a filter within another filter in AngularJS?

After creating a filter to convert my date to time, I decided to name it the official filter "date" of AngularJS. project.date_created_at and project.mel have different formats, so I needed to create a custom filter for project.date_created_at. HTML : ...

javascriptangularjsfilterangularjs-scope

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

I am currently working on customizing a one-page web template and I don't have much experience with Bootstrap. The template can be found at . My issue is that the menu items are not functional in Chrome. When I click on any menu item, nothing happens ...

javascripthtmlcsstwitter-bootstrap

Node-pty in NWjs application causing DLL malfunction

When attempting to run a terminal emulator / command prompt in NW.js using xterm JS and node-pty, I encountered a DLL Error. The following is the log: Uncaught Error: A DLL Initialization Routine Failed. \\?\C:\Users\volke.a\ ...

javascriptnode.jsterminalnwjs

collaborate and coordinate a territory among various components on a map

I'm currently working with an array of elements that are being drawn on a canvas. export function useCanvas(){ const canvasRef = useRef(null); const [ elements, setElements] = useState([]); const [ isHover, setIsHover] = useState(false); ...

javascriptreactjs

Setting up event listeners from a string array (using PIXI.js)

Hey there! I've encountered a bit of an interesting challenge that could easily be resolved by duplicating the code, but where's the fun in that? This project is more of an experiment for me, just to prove that I can do it. However, the idea has ...

javascripttypescriptcallbackpixi.js

What is the jQuery Autocomplete syntax like?

Though my experience with jQuery is limited, I have successfully implemented Autocomplete code that highlights the search characters in the dropdown rows: .autocomplete({ delay: 500, minLength: 0, source: function(request, response) { ...

javascriptjqueryajaxautocomplete

Create a React component that can be rendered multiple times without duplicating

I have a component that must render a specific item based on the props it receives from its parent component. const Contract = ({ savingsFactors, isContract }) => ( {isContract ? ( <PutField label={label} placeholder={plac ...

javascriptarraysreactjs

Conditionally defining variables in JavaScript only if they are currently undefined

I have been working on extracting two keywords from a URL in the following format: localhost:3000/"charactername"/"realmname" My goal is to extract "charactername" and "realmname" and assign them to variables. Here is the code snippet I am using: var c ...

javascripthttpurl

Utilizing a custom font to emphasize the extended phrase in the following sentence

I've been trying to use word-wrap to break long words into the next line, but unfortunately it's not working as expected. You can view my JsFiddle code for reference. The divs on my page are generated dynamically, and here is an overview of what ...

javascriptjquerycsshtml

The error message "TypeError: undefined is not an object (evaluating '_reactNative.Stylesheet.create')" occurred in a React Native environment

I've been working on a project in React Native and have successfully installed all the necessary dependencies. However, upon running the code, I encounter the following error message: TypeError: undefined is not an object (evaluating '_reactNativ ...

javascriptreact-nativenpm

Changes in props do not automatically update children via Ref

I'm working on a React component that needs to update whenever the width changes: import { useRef, useEffect, useState } from "react"; function Child({ containerWidth }) { console.log("CHILD", containerWidth); return <div&g ...

javascriptreactjsuse-refusecallback

Issues with AngularJS compatibility on Internet Explorer 8

Recently, I've been developing a new Angular app and I'm trying to ensure that it's compatible with IE8. It seems like the app is loading in the routing information and the template partially, but I keep encountering an error in the console ...

javascriptangularjsinternet-explorer-8

Accessing nested arrays and objects within JSON using Node.js

I'm in the process of developing an application that retrieves a JSON response from an API call using SONARQUBE. With node js, how can I extract the value of duplicated_lines from the following JSON object? I attempted the code below but it always r ...

javascriptarraysjsonnode.jsexpress

What is the best way to incorporate an image that appears when a user clicks on a

My goal is to dynamically place an image exactly where a user clicks on the webpage. Currently, I have the following code, but it only adds the image at the top and continues to do so repeatedly...not appearing at the clicked location. <html> ...

javascript

Utilizing JQuery to recycle data post-load

I've got this function: // AJAX MESSAGES DISPLAYING show_msg.on('click', function(e){ var $this = $(this), url = $this.attr('href'), url_info = url + ' .basic_info > *', url_msg = url + ' .cont ...

javascriptjqueryajax