How can I import a static url using webpack:
index.js
import 'http://google.com/myscript.js'
It's really unclear what you're trying to do, but in general you have a few options.
Pre-download the script or install it via NPM. This probably is the preferred way to deal with external dependencies. Once it is local you can easily import or require it like any other module.
If it absolutely must be loaded dynamically you will need a 3rd party module such as https://www.npmjs.com/package/scriptjs which can easily download 3rd party modules at runtime and block the execution of the rest of the script until it has been parsed.
Use a <script> tag and include it on your page. This only works if it's a general dependency that can be loaded before everything else (maybe for a polyfill or a library you depend on everywhere like jquery.)
I hope that helps!
This webpack issue says you can use this comment to allow the import to just work. Though this is only dynamic import not static.
import(/* webpackIgnore: true */ "https://example.com");
First seen here https://stackoverflow.com/a/69951351/4619267
import is es6. With es5 and webpack, use require, or better wrap your JS files with AMD/UMD.
Related
(Code below is a simple example, real scenario is bigger)
I have two modules, mod1.js and mod2.js, which are bundled together (using esbuild). They share a common dependency, util.js.
Problem is: when code in mod2.js imports util.js (using same alias), there's a conflict with names.
util.js:
export class Util {
...
}
mod1.js:
import Util from "./util.js";
...
mod2.js:
/* this raises an error of variable already declared */
import Util from "./util.js";
...
If I change alias in mod2.js, error goes away, as expected. But changing aliases every time I import util.js is a bit clumsy, and makes me think there has to be another way.
Is there a better approach to point to a common dependency from multiple modules which are bundled together?
Thanks in advance!
With help from #Bergi's comment, I figured out that I was not using esbuild to bundle my files, but rather using Hugo to concatenate them, and passing this to esbuild.
This leads to mentioned error because there are multiple imports in the same file, which esbuild correctly doesn't recognize as valid. Instead, using esbuild to bundle my files gives me correct results.
I'm still using Hugo, but I have a single entry point which it consumes, that imports all my scripts. From example, I have another file, say master.js:
master.js:
import mod1 from "./mod1.js";
import mod2 from "./mod2.js";
And I then pass this master.js to Hugo, using its js.Build function, which internally uses esbuild. This way I can import util.js using same alias, because these imports are in separate files, using ES6 linking from esbuild.
I need to assimilate some code into a React app. Problem is, that the code i want to use comes from some example i found on the web, which uses "normal" tags to import various other scripts, via an HTML file.
The main script file that i want to use calls countless various functions from external scripts.(The script "assumes" those functions are available). This of course works in the browser, but not in a build system like Babel/Webpack.
To make things short: what would be the node/es6 equivalent of:
<script src="/dev/getHTMLMediaElement.js"></script>
And how do i make those functions available anywhere in the React app?
My React app is a fairly standard one, booted with react-create-app.
You can require or import this file directly after adding externals option in webpack config
Ref: https://webpack.js.org/configuration/externals/
Right now I pull in all my own es6 modules and create a bundle using Rollup.
Recently I started using VueJS, which now has an ES6 Module which can be pulled in just like my own modules. Rollup does some treeshaking on it, but I don't know if that is a very good idea? I don't know what it is doing, so I would rather it does nothing!
Instead I just add vue at the end of my HTML:
<script src="dist/bundle.js"></script>
I love the convenience of having everything as one bundled file, but should I really treeshake the entire Vue app, is there a command in Rollup that I can not treeshake just this one module?
EDIT
I have found the --external option, which seems good as it would just keep the import for vue and bundle the rest, but it does not seem to work!
When I use rollup --format=iife --external=../node_modules/vue/dist/vue.esm.browser.js --file=dist/bundle.js -- src/main.js it says Error: Could not resolve '../node_modules/vue/dist/vue.esm.browser.js' from src/app.js.
In my main.js it has import Vue from '../node_modules/vue/dist/vue.esm.browser.js; which works fine for the app. I want to make Vue an external, but it won't work!
To prevent Rollup from treeshaking a particular module, you can simply import it blindly (instead of a part of it), so that Rollup thinks the module performs some side effect:
import 'vue'
Of course you can still import some bits in parallel, so that you can rename the default export for example:
import 'vue'
import Vue from 'vue'
As for your --external option, you probably just need to wrap the path value with quotes:
--external='../node_modules/vue/dist/vue.esm.browser.js'
Note that you should probably switch to Rollup configuration file (instead of CLI options) to make your life easier. You will also be able to use rollup plugins, e.g. rollup-plugin-alias to manage the exact location of the Vue file you want to use.
I'm trying to add: https://www.npmjs.com/package/is-url to my react/redux project but I'm not sure what to put for importing.
Is there another, es6 friendly install that I could use?
You can use:
import isUrl from 'is-url';
Or even
import anotherNameForIsUrl from 'is-url'
The reason for this, is that the module of the library is exported as default as seen per the source file: https://github.com/segmentio/is-url/blob/master/index.js which means you are free to give it your own variable name.
Another thing is to think about moving the source code to your project, so you dont need another very small third-party dependency.
If I code any TypeScript stuff and use import statements, the imports are transpiled to require-statements.
Because require isn´t according to ECMA, I have to use systemJS.
I import other code like classes, helpers or something like that. Or libs like lodash.
But, what if I don´t want to use systemJS or create JS-bundles everytime?
Is there another way?
Currently you need a bundler or at least a loader. In time, browsers will directly support ES2015 modules. AFAIK, the only one that currently does is a recent Safari Developer Preview.
When they do, you'll load your main script as type="module":
<script src="yourfile.js" type="module"></script>
...and within it any import statements like this:
import foo from "./foo.js";
...will be resolved and retrieved.
This is all proceeding very deliberatively, and things will change, but that's all we have in the spec for now.