I have a very particular use case. I want to import a javascript file as a string and inject it into html responses at will in a service worker. I can't see how to do this using parceljs beyond hosting the javascript file somewhere and doing fetch at runtime to load the js file into memory. However, I want to do this at build time. How best to do this?
Note: Ideally the dependencies of javascript file I am importing should be bundled into the string.
Seems to be possible in parcel 2 with
import js from "bundle-text:./b.ts";
console.log(js);
https://v2.parceljs.org/configuration/plugin-configuration/#predefined-(offical)-named-pipelines
Related
I have a project consisting of a TypeScript file and an HTML page. Currently, I am loading several libraries that the TypeScript file requires in the HTML Page by including them in tags, i.e. <script src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>.
Since I would like to use the TypeScript code in other web pages without having to copy a bunch of script tags, is there a way I could load the libraries in the TypeScript file instead of in the HTML file? I tried searching it up and saw some options (for example, import and export) but just using import {Tabulator} from 'tabulator-tables'; obviously didn't work, and I'm somewhat lost.
Because you stated that you're not using any bundler, and that you don't want to use a UMD module in a <script> element, you'll need a version of tabulator-tables that is in the ES module format. It looks like the package provides one at https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.es2015.min.js. You can download that file locally to your project and import from it in your script like this:
import Tabulator from './relative/path/to/where/you/saved/tabulator.es2015.min.js';
You'll need to publish that downloaded module alongside your HTML file, JS file, etc. wherever you're serving the web page, and make sure that you set your own script's type attribute to module in the HTML.
Let's say I have a few external javascript files (libraries, if you prefer to call them that way). Those files haven't been adapted to any of the "modern" JS functionalities, meaning that I can't import them like I'd do with some of the most common libraries nowadays (lodash, axios, etc...). The files in question have been always used as old-style import-and-use libraries (<script src="foo.js"></script>).
How can I make Webpack pack (concatenate) all those files and inject them in the head of my index.html, right before my actual bundle?
You can download 'foo.js' manually and add it to project repo. Imagine like you have a folder called 'external-libs' and you can simply import foo.js as something like following
import '../../external-libs/foo.js';
This will be enough for Webpack to append the content of foo.js to your final bundle.
I'm pretty new to Typescript. I'm about to work on a Js project and I want to use Typescript because provides modularity features which helps me to maintain and develop the project more easily.
I put each class inside one single ts file and imported all of them in the main.ts file. I used --outFile flag to compile all of them into a single js file
but the problem is I want to finally compile them into a single js file and easily attach it to HTML file without any other preliminaries such as importing require.js! is there any way to do it without importing any other js files to the HTML document? if not, please suggest me an alternative way!
because I want to just compile all the stuff into one file like jquery.js file.
I used --outFile
Use outFile only if your code doesn't depend on any other library as it is straight concatenation.
the problem is I want to finally compile them into a single js file and easily attach it to HTML file without any other preliminaries such as importing require.js
This will only happen if you used a module aka import/export statement in your code. These require a module loader. outFile should not be used if you are using modules.
Thoughts
Personally I recommend commonjs with webpack
This is what I was looking for
https://www.typescriptlang.org/docs/handbook/gulp.html
I'm trying to split my server in multiples files, and actually I want to make cmdb_login.js and main.js.
The thing is that I don't know and I don't find how to say in main.js, use cmdb_login.js.
I have tried import './cmdb_login.js';
My app structure is:
If you need the code of the two .js files just ask me.
Thank you for the help
As always, Meteor combines all files eagerly, unless they are placed in a path which includes a folder named imports.
I.e. in your case, your cmdb_login.js will be combined (and then executed) before main.js in the server JavaScript code.
A proper way is to put almost all your files in an imports folder, and explicitly call them in a single main.js file (or whatever its name, provided that it is not in an imports folder), using an import statement like the one you tried (e.g. import './imports/cmdb_login.js').
I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.