This question already has answers here:
import module just to run it
(2 answers)
Closed 6 years ago.
I am running Webpack, Babel and Vue.js and I want to split up my entry file. Currently I have an app.js file which is the starting point to my application.
I have some bits and pieces of Code I want to put into a bootstrap.js file which I want to include in my main app.js file can I can have a clean file to start out with Vue and add components in it as I go.
Some examples of what I would want to put in my bootstrap.js file:
import messagesNL from './translations/nl';
Vue.use(VeeValidate, {
locale: 'nl',
dictionary: {
nl: {
messages: messagesNL
}
}
});
window.Vue = Vue;
So pretty much setup for plugins, global configuration, etc. I feel like this is not your typical module and I find it hard to create a module like structure for this file so I basically use this in my app.js file:
import bootstrap from './bootstrap';
Having no idea if this would work, it seems to just import everything neatly without me having done a module exports {} like syntax.
Now the bootstrap variable that I assigned to that file is unused in app.js since it's only used to require the file and my IDE kind of 'greys` it out to let me know it is unused.
Is there another syntax for this so that I don't have to assign a name to it? Is this approach ok to split up my file, or should I be doing something else?
I haven't put it into a proper module yet because then it would have it's own local scope and I would be unsure how to set up Vue with all the plugins, etc. If anybody has a better suggestion I am open to it.
Cheers.
To include a file without importing anything you can just drop the <name> from part of the statement:
import './bootstrap';
This will execute the target module without affecting the scope of the active module, but it may have side-effects such as declaring globals or modifying existing globals.
As stated in the MDN docs for Import a module for its side effects only:
Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.
import '/modules/my-module.js';
Related
Hello guys i have a little question about importing files into a single .js file.
Which way is better (best practice), what's the scenario that is used for:
import './file;'
import { something } from './file'
import * as evertything from './file'
Because i see that 2 and 3 are the same thing but different syntax(maybe Syntactic Sugar).
All three do different things.
import './file;'
That loads the file, and does not import anything. This is useful if you want to initialize that module (or add some external dependency, e.g. a css file if you use Webpack).
import { something } from './file'
That just imports something from the file, therefore a bundler could optimize all other dependencies away. I'd always try to go with that instead of
import * as evertything from './file'
That imports everything from that module under a namespace, and therefore makes treeshaking more difficult (the bundler cannot optimize it well). I'd only use that if you need everything from that dependency, or if that dependency is loaded externally nevertheless (e.g. import * as React from "react").
I guess the following MDN documentation will make you clear about those things:
import - JavaScript|MDN
As far as I know, 1st method is used when you have only one default export. 2nd is used when you have multiple default exports but you don't want all of them to load and want only few of them. 3rd is the case when you want everything under a single object (which can be used similar to namespace in other programming languages).
I'm using ES6 dynamic import to load a Sass file, according to an environment variable.
It's working fine, but when I build the production directory with Webpack, all the Sass files are exported as a JS chunk in the build directory.
After some research, I finally understand that import() look for similar files with the same path (only when I put a variable in the import)
It's quite problematic, I'd like to get the correct Sass file exported, and not the others.
import(`./assets/scss/App.${brandName}.scss`)
Any idea ?
Normally, you can't do that!
Because import statement must be at the top. Thus, you cannot define the variable before import statement. Hence, you cannot utilize the variable in import statements.
But, you can trick to use like this:
import brandName from 'your_path_to_brandName_export'
import(`./assets/scss/App.${brandName}.scss`)
Update
I am not sure about dynamic import, but it might help you further. See this proposal:
<script type="module">
import * as module from './utils.mjs';
module.default();
// → logs 'Hi from the default export!'
module.doStuff();
// → logs 'Doing stuff…'
</script>
See this source for further help.
Hope, this helps!
I have seen this following pattern within index.js file and I am left scratching my head. What would be the purpose of the following code below, considering:
The imported module is not being consumed within this module/file
There is no export of the imported module
The following code is all there is within the index.js file (yes, just one line):
import '../modules/index.js';
To elaborate, the index.js file is importing from '../modules/index.js'. That is it, there is no other code within the file whatsoever.
The only reason I'm aware of where one might want to do an import without utilizing anything imported is when the imported file has some form of side effect that happens simply by evaluating the code, such as defining a global variable. In this case, simply importing the code will cause that code to be run. If you can indicate more about the contents of modules/index.js we might be able to get to a more defined answer of what's happening in this case.
I'm currently learning react and thus es6/es7 and webpack.
Coming from a largely python background I'm annoyed by the folder sensitive path declarations for import statements, i.e. the use of ../../ in import statements. This means if I move a file to a different directory, i need to change the import statements declared in the file.
Python's import statement doesn't have this issue. I'd like to mimic that behavior
(search first a particular directory for this path, if not search this other base directory)
e.g. if i have the directory structure
myApp
components
component1.jsx
stores
store1.jsx
views
view1.jsx
node_modules
react
etc
in my view1.jsx I don't want to write
import Component1 from '../components/component1'
I want to write
import Component1 from 'components/component1'
or maybe even
import Component1 from 'myApp/components/component1'
just to make sure I don't have name collisions with some npm package I may be using.
What is the correct way of accomplishing this in webpack? Is it using alias?
I ended up following #zerkms recommendation. resolve.modulesDirectories is the way to go.
I wrote a loader to accomplish this, https://www.npmjs.com/package/future-require-loader. It will autoload a path anywhere three underscores surround a partial file path ___filename.js___. it also allows folder paths: ___folder/filename.js___. it will attempt to match the first file path that includes the string so you will want to include folders if there could be a conflict.
I am using this GULP plugin which converts HTML files into ES6 exports so I could load them on the browser in my MVC (using rollup bundler).
Basically I have page controllers which are exported as modules.
Then, in my main JS file, I just import all the page controllers, once by one, like so (simplified):
import * as page__home from './pages/page1';
import * as page__home from './pages/page2';
...
Since this is an SPA, I would think it would be easier to somehow import all the page controllers into some object, so then when a controller is to be called, I could check if that name exist in that object which holds all the imported controllers, or something like that.
Or maybe there is a way to check if a module was imported somehow?
Is there any smarter way of doing this? Thanks
As noted above:
I think I got it actually, I will combine all the controllers files using gulp, then import that one file, and it will all be under that namespace, like so import * as pages from './pages/bundle'; then I could check if( pages["xxx"] )