Is it possible to have a variable file name in the import syntax.
for example:
import * as myModule from "my-module";
to be something like this:
var module="my-module";
import * as myModule from module;
Or there is other approach for this? If not can you specify a base(root) dir from where to load the modules?
Thanks
For the baseroot I am just using a simple workaround with a symlink:
Link your src/ to the node_module/src
And use it:
import A from 'src/some/where/A
There are also other possible ways of doing it, but I am ok, with it, its really simple and it works ;)
Check out this How to make the require in node.js to be always relative to the root folder of the project?
Related
Currently we have multiple node package published in this format
#company/module1
#company/module2
I would like to be able to load these module from local without installing it so we can modify the code directly.
So I make the link in the folder tree like this
- company/
-- module1 -> ../../module1
-- module2 -> ../../module2
Now I want when I import from the scoped name, it will load from local files instead
import module1 from '#company/module1'
Load from my other folder instead of looking from node_modules instalations.
Can anyone help me on this? Thank you very much.
You can't import the modules, libraries, or a single file in the node.js with the common import statement import Example from "package".
So, try to use the const Example = require('package') instead.
const module1 = require("path/to/the/module1");
const module2 = require("path/to/the/module2");
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'd like to load/import and use the Bootstrap-table extensions but no luck yet...
The basic module load is fine:
I've added with yarn to the package.json and it sits there like this:
"bootstrap-table": "^1.11.2",
In the javascript file I import it:
import BootstrapTable from "bootstrap-table";
And the usage is fine as well:
$.extend($.fn.bootstrapTable.defaults, {
filterControl: true,
showMultiSort: true
});
$('.element').bootstrapTable();
But (obviously) it doesn't pick the custom options up. How should I load the extensions from the node_modules/bootstrap-table/src/extensions directory?
in ES5 I've had to load those js files one by one, after the bootstrap-table.js. But how does it work in ES6?
Thank you!
To use named imports the package would need to use named exports, I've just taken a look at that package and it doesn't, so you can't import a single module member with the ES6 syntax:
import {Module} from 'my-package';
so you will have to reference the file directly in your node_modules folder:
import FilterControl from '/node_modules/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.js';
It might be worth raising an issue asking the package publisher to add the named exports, which is essentially one file entry point that exports everything for you.
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"] )