There is a familiar option in rollup output.globals
assuming the provider package have global variables that look like this:
$myGlobal = {
parents: class Parents {}
managers: class Managers {}
}
and the consumer imports the classes in this approach:
import Parents from "#myglobal/parents";
import Managers from "#myglobal/managers";
This is easily can be done from the consumer side using the option output.globals, that will look like that:
output: {
file: `lib/${outputFileName}.js`,
format: 'cjs',
indent: false,
exports: 'auto',
globals: {
'#myglobal/parents': '$myGlobal.parents',
'#myglobal/managers': '$myGlobal.managers',
},
},
The question is how to achieve it via the provider, not via the consumer?
Thanks.
Related
The following is my problem.
I packaged my project through vite in library mode. The error occurs whenever my library includes any third party UI library (e.g vue-loading-overlay). But other libraries like moment.js will have no problem.
This is my vite.config.js, Is there any problem with my configuration?
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, "src/lib.ts"),
name: "my-ui-lib",
fileName: "my-ui-lib",
},
rollupOptions: {
external: ["vue"],
output: [
{
format: "es",
exports: "named",
globals: { vue: "vue" },
},
],
},
},
});
Finally I resolved my problem, Adding the following in vite.config.js. It works for me.
build: {
/** If you set esmExternals to true, this plugins assumes that
all external dependencies are ES modules */
commonjsOptions: {
esmExternals: true
},
}
Original Answer
"Chart.js V3 is treeshakable so you need to import and register everything or if you want everything you need to import the chart from the auto import like so:
change
import Chart from 'chart.js'
to ->
import Chart from 'chart.js/auto';
For more information about the different ways of importing and using chart.js you can read the integration page in the docs.
Since you are upgrading from Chart.js V2 you might also want to read the migration guide since there are some major breaking changes between V2 and V3"
/* Adding the following in vite.config.js. Just copy and paste all these code. It works for me. */
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
commonjsOptions: {
esmExternals: true,
},
});
react-pdf v6 has a pretty clever solution for this, look at their entry files. I think the point is to link to the correct file, somehow there's no need to "actually" import the worker (it doesn't run on main thread anyway I guess? New to worker and pdfjs).
import * as pdfjs from 'pdfjs-dist/build/pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url);
import.meta availability.
Refer to vuejs 3 documentation to import vue.
I'm learning Prisma ORM from video tutorials and official docs. They are explain and write All model code in one file called schema.prisma. It's ok but, when application grow it became messy. So, how should I separate my Model definition into separate file?
At this point in time Prisma doesn't support file segmentation. I can recommend 3 solutions though.
Option 1: Prismix
Prismix utilizes models and enums to create relations across files for your Prisma schema via a prismix configuration file.
{
"mixers": [
{
"input": [
"base.prisma",
"./modules/auth/auth.prisma",
"./modules/posts/posts.prisma",
],
"output": "prisma/schema.prisma"
}
]
}
Placing this inside of a prismix.config.json file which will define how you'd like to merge your Prisma segmentations.
Option 2: Schemix
Schemix Utilizes Typescript configurations to handle schema segmenting.
For example:
// _schema.ts
import { createSchema } from "schemix";
export const PrismaSchema = createSchema({
datasource: {
provider: "postgresql",
url: {
env: "DATABASE_URL"
},
},
generator: {
provider: "prisma-client-js",
},
});
export const UserModel = PrismaSchema.createModel("User");
import "./models/User.model";
PrismaSchema.export("./", "schema");
Inside of User.model
// models/User.model.ts
import { UserModel, PostModel, PostTypeEnum } from "../_schema";
UserModel
.string("id", { id: true, default: { uuid: true } })
.int("registrantNumber", { default: { autoincrement: true } })
.boolean("isBanned", { default: false })
.relation("posts", PostModel, { list: true })
.raw('##map("service_user")');
This will then generate your prisma/schema.prisma containing your full schema. I used only one database as an example (taken from documentation) but you should get the point.
Option 3: Cat -> Generate
Segmenting your schema into chunk part filenames and run:
cat *.part.prisma > schema.prisma
yarn prisma generate
Most of these if not all of them are referenced here in the currently Open issue regarding support for Prisma schema file segmentation https://github.com/prisma/prisma/issues/2377
This is not yet possible with Prisma. See this outstanding issue for possible workarounds https://github.com/prisma/prisma/issues/2377.
There is a library called Prismix that allows you to write as many schema files as you'd like, here you go the link
i define the process.config in vite.config.js such as this
define: {
'process.env': {
publishDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
version: pkg.version,
title: pkg.title
}
},
in dev mode ,it works,
but in prod mode, the process.config is unfound.
Because you are not doing things as vite documentation suggests:
Type: Record<string, string>
For example, process.env.FOO and __APP_VERSION__ are good fits. But process or global should not be put into this option.
it's implemented as straightforward text replacements without any syntax analysis
The map should be a string to string, not string to object. So you can write:
define: {
'process.env.publishDate': JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss'))
},
Just started using Nuxt.js a week ago and I'm not getting the hang of the plugins system.
The relevant part of my nuxt.config.js looks like this:
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/lodash',
],
And I created a file named lodash.js in the plugins directory that looks like this:
import Vue from 'vue';
import lodash from 'lodash';
Vue.use(lodash);
But then in my .vue component, when I console.log('lodash:', this.lodash), it prints out lodash: undefined, and when I try to use this.lodash.pick(['a'], { a: 'a', b: 'b' }), for instance, it throws the error: TypeError: Cannot read property 'pick' of undefined.
So then I tried using this.$lodash (added an $), and when I then console.log('lodash:', this.$lodash), it logs lodash: ƒ, and using console.log('lodash:', this.$lodash()) (calling it like a function) logs lodash: LodashWrapper {__wrapped__: undefined, __actions__: Array(0), __chain__: false, __index__: 0, __values__: undefined} (i.e. an object with a bunch of worthless properties).
So then I thought maybe Vue.use() isn't the way to go and maybe I should instead inject lodash, so I changed up my lodash.js plugin file to look like this:
import lodash from 'lodash';
export default({ app }, inject) => {
inject('lodash', lodash);
}
But that led to exactly the same results. And now I don't know what else to try. So my question is how do you install and use lodash (and I suppose any other random npm module) in a nuxt.js project?
FWIW my project's running nuxt version 2.14.12
I've achieved adding lodash into this.$_ using Atif Zia's reccomendation of vue-lodash.
plugins/lodash.js:
import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'
Vue.use(VueLodash, { name: '$_', lodash })
nuxt.config.js:
export default {
...
plugins: ['~/plugins/lodash.js'],
...
}
Usage in script:
var object = { 'a': 1, 'b': '2', 'c': 3 };
this._.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
Looking at their GitHub, it looks like this package allows lodash to be webpacked properly.
Hi #PrintlnParams you can eigther use vue-lodash package to achieve
this.$_.sumBy().
or you can import lodash as
import _ from "lodash"
or individual components as
import { sumBy } from "lodash"
to use with Nuxt.Js
I created a new dummy app with react-native init test, and then followed the instructions to add typeorm. In my App.js I included import {getManager} from 'typeorm', and then ran react-native run-ios.
I see the following error in metro-bundler:
Error: Unable to resolve module path from /Users/amit/Code/test/node_modules/typeorm/platform/PlatformTools.js: Module path does not exist in the Haste module map
Here's a sample repository to show the problem: enter link description here
Not sure if I missed something in the setup! Any help is really welcome!
Unfortunately import from 'typeorm' module does not work because react-native projects does not use node platform excatly. Imports from 'typeorm/browser' will work. Here is a sample project.: https://github.com/typeorm/react-native-example
Make sure you create a connection object that does not use any references to project file system. Avoid using something like:
import { CountSession } from '../biopro-mobile-database/entities/count_session';
const connection = await createConnection({
name: 'liteDb_3',
type: 'react-native',
database: 'biopro_mobile.sqlite',
location: 'default',
synchronize: false,
logging: true,
entities: ["../biopro-mobile-database/entities/**/*.ts"],
})
Avoid entities: ["../biopro-mobile-database/entities//*.ts"],**
Instead use something like:
import { EquipmentCounted } from '../biopro-mobile-database/entities/equipment_counted';
import { CountSession } from '../biopro-mobile-database/entities/count_session';
const connection = await createConnection({
name: 'liteDb_3',
type: 'react-native',
database: 'biopro_mobile.sqlite',
location: 'default',
synchronize: false,
logging: true,
entities: [
CountSession,
EquipmentCounted,
],
})