Please take a look at the following import statement:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
Is it possible to give an alias to the name of the package that is being imported -- i.e., in this case to #fortawesome/react-fontawesome.
That way I wouldn't have to write out the entire project name each time.
For clarity sake, I'm looking for a final result where I could do something like this:
import { FontAwesomeIcon } from 'fa'
or this
import { FontAwesomeIcon } from '#custom/fa'
With fa (or #custom/fa) is a name that I created that references the actual #fortawesome/react-fontawesome library.
Is this possible? If so, how?
Im assuming you're using webpack. If so you can use the Webpack.resolve functionality. You just need to edit your webpack.config.js and setup like the following:
// webpack.config.js
module.exports = {
//...
resolve: {
alias: {
fa: path.resolve(__dirname, '#fortawesome/react-fontawesome')
}
}
//...
}
Your import would become
import { FontAwesomeIcon } from 'fa'
You could create a file that stores your dependencies in an object. I will call this file dependencies.js.
export default const dependencies = {
FA: '#fortawesome/react-fontawesome',
...
...
}
Then you can import these at the very top of each of your javascript files and use it to import further dependencies.
import dependencies from './dependencies';
import { FontAwesomeIcon } from dependencies.FA
Related
This Meteor app has a template event that maks a Meteor.call, and is causing browser error Cannot find module 'server/plateCheck.js'. The file responsible is:
//app/imports/api/vehicles/methods.js
import { Meteor } from 'meteor/meteor'
import { Vehicles } from './vehicles.js'
import { plateCheck } from "../server/plateCheck.js"; //<<<<<<<<<<
Meteor.methods({
'extractPlateData': function (plate) {
console.log('method called: ', plate)
plateCheck(plate)
}
)},
//app/imports/api/vehicles/server/plateCheck.js
import {Vehicles} from '../imports/api/vehicles/vehicles.js'
const plateCheck = async (plateNumber) => {...}
module.exports = plateCheck;
meteor list includes ecmascript 0.15.1
Why is this and isn't the export/import correct as stated? How to get read of the error? Thanks.
Your relative path is wrong. The server folder is in the same directory as methods.js, so you'll need to import
import { plateCheck } from "./server/plateCheck.js";
Or you can make all imports absolute:
//app/imports/api/vehicles/methods.js
import { plateCheck } from "/imports/api/server/plateCheck.js";
...
//app/imports/api/vehicles/server/plateCheck.js
import {Vehicles} from '/imports/api/vehicles/vehicles.js'
I want to import several entries from a module and assign to some alias. Is that possible? Currently I do
import {
mdiAlert,
mdiCheck,
mdiDelete,
... 40 more ...
} from '#mdi/js'
export default new Vuetify({
icons: {
values: {
mdiAlert,
mdiCheck,
mdiDelete,
... 40 more ...
}
}
})
Is is possible to import { one, two, three } as something from 'module' somehow to avoid code duplication?
No, you cannot import a few module entries into an object. You need to import the bindings under a local alias and then build the object from them separately.
What you can however do is to import the complete module as a namespace object:
import * as mdiValues from '#mdi/js'
export default new Vuetify({
icons: {
values: mdiValues,
}
})
I am writing a Bluetooth library for Node.js using TypeScript and Rollup. I want to enable users to import my libraries components in these ways
import Sblendid from "#sblendid/sblendid";
import Sblendid, { Peripheral } from "#sblendid/sblendid";
const Sblendid = require("#sblendid/sblendid");
const { Peripheral } = require("#sblendid/sblendid");
My project structure looks like this:
root
∟ rollup.config.ts
∟ src
∟ index.ts
∟ sblendid.ts
∟ peripheral.ts
And the according code is this:
index.ts
export {
default,
} from "./sblendid";
export {
default as Peripheral,
} from "./peripheral";
sblendid.ts
export default class Sblendid {}
peripheral.ts
export default class Peripheral {}
I am bundling everything with Rollup and my entire config is this:
import typescript from "typescript";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import typescriptPlugin from "rollup-plugin-typescript2";
import autoExternal from "rollup-plugin-auto-external";
import { terser } from "rollup-plugin-terser";
import pkg from "./package.json";
export default {
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true
},
{
file: pkg.module,
format: "es",
sourcemap: true
}
],
plugins: [
autoExternal(),
resolve({ preferBuiltins: true }),
commonjs(),
typescriptPlugin({ typescript, objectHashIgnoreUnknownHack: true }),
terser()
]
};
You can find the entire code here
https://github.com/LukasBombach/sblendid/tree/master/packages/sblendid
Now, this setup does not work. Rollup tells me
$ rollup -c rollup.config.ts
src/index.ts → dist/index.cjs.js, dist/index.es.js...
(!) Mixing named and default exports
Consumers of your bundle will have to use bundle['default'] to access the default export, which may not be what you want. Use `output.exports: 'named'` to disable this warning
which is true. This
const Sblendid = require("#sblendid/sblendid");
simply does not work. What I have to do is this:
const Sblendid = require("#sblendid/sblendid").default;
I can fix this behavior by not mixing named ad default exports, ok, but then I lose the ability to do this:
import Sblendid, { Peripheral } from "#sblendid/sblendid";
So I am wondering. Is there any way, maybe using multiple bundles, I can achieve having users be able to do both:
// This
import Sblendid from "#sblendid/sblendid";
import Sblendid, { Peripheral } from "#sblendid/sblendid";
// And this
const Sblendid = require("#sblendid/sblendid");
const { Peripheral } = require("#sblendid/sblendid");
If you target only nodejs environment you can export like this (index.ts)
import Sblendid from "./sblendid";
import Peripheral from "./peripheral";
Sblendid.Peripheral = Peripheral;
export default Sblendid;
Commonjs does not have the concept of default export. When you are able do:
const Splendid = require("#sblendid/sblendid");
const { Peripheral } = require("#sblendid/sblendid");
It does mean that
assert.equal(Splendid.Peripheral, Peripheral);
That Peripheral is a property of Splendid.
This is basically achieved by
Splendid.Peripheral = /* something */;
module.exports = Splendid;
When cjs code is transpiled from esm code (what rollup does) the only choice is to introduce a default property on the exports object.
If you're not comfortable with adding properties just for the sake of exporting, add a snipped like this to your docs.
const { default: Splendid, Peripheral } = require('...');
I'm importing many FA icons:
import { faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt }
from '#fortawesome/free-solid-svg-icons'
library.add(faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt)
How can I declare that list once and then re-use it? Would it be an array? Or an object ... of what?
I was thinking
const icons = {faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt}
import icons from '#fortawesome/free-solid-svg-icons'
But of course that doesn't work. And what would I do for library.add()?
What is that object-looking thing that follows import ?
One solution is to create a new module that exports your specific icons.
// icons.js
export {
faUsers,
faCut,
faBullhorn,
faPenNib,
faCircle,
faPalette,
faVolumeUp,
faSmile,
faGrin,
faShekelSign,
faTv,
faUserTie,
faFolder,
faPaintBrush,
faCircleNotch,
faSignOutAlt
} from '#fortawesome/free-solid-svg-icons';
Then you can simply import your new module and consume it using spread syntax.
// library.js
import {library} from '#fortawesome/fontawesome-svg-core'
import * as icons from './icons';
library.add(...Object.values(icons));
import and export are defined to be statically analyzable, so they cannot depend on runtime information. Therefore, it is not possible with import statement.
The object looking like thing after import is called named imports that are used to get selected items from the list of exported items. For instance, fontawesome has all the icons objects exported via a single file. Now you can use import { ... } to import only the items you need.
One library exports its function in such way:
export {
default,
sitemapBuilder,
routesParser,
pathsFilter,
paramsApplier,
} from './lib';
I would like to import them by single line:
import { Sitemap, routesParser } from 'react-router-sitemap';
But it doesn't work, Sitemap and routesParser are undefined.
From their guide:
import Sitemap from 'react-router-sitemap';
import { routesParser as parseRoutes } from 'react-router-sitemap';
Sitemap is class
routesParser is function
Actual result:
Sitemap loaded ok
parseRoutes is undefined
Try like this to import in single line
import Sitemap, { routesParser } from 'react-router-sitemap';
Import everything like below,
import * as parseRoutes from 'react-router-sitemap';
eg: console.log(parseRoutes.sitemapBuilder());
Or Import something like below,
import { sitemapBuilder, routesParser } from 'react-router-sitemap';