This question already has an answer here:
Is there any one-line analogy in ES6 for ES5 `module.exports = require('./inner.js')`?
(1 answer)
Closed 7 years ago.
I am writing a JS library. The core file of the library is an ES6 file that exports a default class, which sits in the following location './lib/myclass'
I want users of my library to be able to import the the library from the root of the repository. To achieve this in ES5 I can put the following into an index.js file at the root:
module.exports = require('./lib/myclass');
How can I do this using default exports in ES6? I would also like to use the ES6 way of importing. I realise that I can still do it the ES5 way, but I am just trying to understand how these new statements work.
Thanks
Import the default export and export it again, as default:
import myclass from './lib/myclass';
export default myclass;
I believe the following should work as well, at least it compiles in Babel:
export {default as default} from './lib/myclass';
Related
I would like to use TroisJS (three.js wrapper for Vue) with Nuxt.js. According to the TroisJS documentation (https://troisjs.github.io/guide/install.html#existing-vuejs-3-project) I need to add it to my project like:
import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);
However, I don"t know how to figure out where I should put this code. I would expect the nuxt.config.js file, but I don't seem to quite get it where it should go.
I decided to use TroisJS and not three.js because I thought the former might be easier to import and use. If importing three.js directly is easier, I don't mind using it.
Thank you very much for any help!
In /plugins folder add new file named troisjs-plugin.js with the following content :
import { TroisJSVuePlugin } from 'troisjs';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(TroisJSVuePlugin )
})
I found a repo with some testing with Trois and Nuxt 3, probably outdated and maybe some apis have changed, but if you wanna check it out: alvarosabu/nuxt3-trois
Also, there's an official repo from the Trois author with a Nuxt 3 custom plugin (probably outdated too) here
What is the difference between the following imports for Vuetify:
Method A:
import Vuetify from 'vuetify/lib/framework';
Method B:
import Vuetify from 'vuetify/lib';
With method A the Vuetify bundle has a size of 1.12MB (development):
With method B it has a size of 1.79MB (development):
For production the bundle size is the same.
My guess is, that with with method A Vuetify is already doing tree-shaking on the development run, while for method B tree-shaking appears only in production build.
You can check for yourself in your node_modules folder (if you use npm).
vuetify/lib/framework exports a Vuetify Class, which is the framework that handles all your vuetify magic.
vuetify/lib exports the same Vuetify Class, but also all components, directives, and predefined colors as named exports for easy access, leading to a larger bundle in development.
As you see in your own result, it really doesn't matter for production due to treeshaking. But, if you're customizing your installation, it's easier to do a single import from vuetify/lib for Vuetify and all other related components, than having separate imports and paths for colors, components, and directives.
I'm on my way to build my first vue frontend, i just found out that when i import json files via import statements they are fixed in the build and can't be "dynamic". For example:
...
// youtube channel info fetched and cached by PHP
import channel from '#/../public/cache/channel.json'
import playlists from '#/../public/cache/playlists/'
export default {
name: 'Home',
components: {
configuration, channel, playlists
},
data(){
console.log(configuration)
console.log(channel)
console.log(playlists)
return{
configuration, channel, playlists
}
}
}
where playlists loads an index.js that contains playlists (file generated by PHP):
import PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG from './playlist-PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG.json'
...
export default{
PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG,...}
My thought was that if I do the build I will still be able to generate these files on the server and Vue resp. the generated code will refer to them - unfortunately this is not the case and I had to learn that vue imports all imports one to one fix during the build (what the name says and is obvious yes) and combines them in a corresponding js file, which makes it impossible for me to link another channel or map to new videos / playlists afterwards.
Is it even possible to "stay dynamic" via imports or do I have to get the json's via axios or something (even if the files are on the same host)?
You have to use Axios/fetch for that...
Imports are indeed static - the content of the imported file is included in the app bundle (at built time)
There is something called dynamic imports but it is the technique intended for "load only what you need at the time you need it". The content of the import is still determined at build time (at build time webpack prepares the file which will be loaded at runtime)
So if you want the content to be dynamic, loaded to the app at runtime, the only solution is to use Axios/fetch and keep the data "outside" of the app itself...
If have an ESNext Aurelia project and I'm trying to implement the excel export feature for aurelia-slickgrid. When I use the import statement described in the documentation:
import { ExcelExportService } from '#slickgrid-universal/excel-export';
I get an error that it can't be resolved, which makes sense to me because it doesn't point to anything.
Any help would be appreciated,
Ross
I can't access the prop functions inside *.ios.js file, the android counterpart works well.
export default connect(mapStateToProps, {
updateTextInput, onResetPressed, getRecentSearches, getPopularNearYou,
filterWhereSelected,
})(ToolbarModal);
stupid mistake from my part, my action creator had a faulty, circular import:
import Suggestions from "../components/toolbarModal.ios";
corrected the import and everything works.. it would have been nice if Webstorm would have not proposed this import or it would have detected there is no Suggestions in toolbarModal.ios.