In a create-react-app i would like to access some properties of the package.json and show those to the user in the browser. Like the version of the app and the version of some of the dependencies specified in the package.json.
How would I access those properties, without importing and exposing the whole package.json to the client?
Executing npm run build on the create-react-app provides a production bundle in the ./build directory.
Solution 1:
The way it works it does not expose the rest of the package.json content to the production bundle when making a destructured import. (E.g. previous answer from Devchris)
import { dependencies } from './package.json';
Solution 2:
By extending the npm scripts it is possible to read and expose the package.json into the node environment and read it from there at build time (https://create-react-app.dev/docs/adding-custom-environment-variables)
process.env.REACT_APP_DEPENDENCIES
Note: The variable must start with 'REACT_APP_'
What you can do is:
import { version, dependencies } from './package.json';
this will give you all dependencies and the version of your package.json in your js code. Keep in mind that your path to the package.json file might be different.
Related
I have a monorepo setup. It looks something like this:
project
node_modules
packages
my-first-project
prisma
schema.prisma
my-second-project
prisma
schema.prisma
So both projects (my-first-project and my-second-project) have #prisma/client installed and get there dependencies from the upper node_modules folder.
The thing is that whenever i change something in my schema.prisma file (e.g. in my-first-project) and run npx prisma migrate dev --name whatever it generates all the types and stuff and puts it in the upper node_modules folder. this leads to "type not found" errors on the other project (e.g. my-second-project).
Is there a way to tell npm to keep some dependencies in a separate node_modules folder inside each project?
You could configure a custom output path to specify the location at which PrismaClient should be generated.
Example:
generator client {
provider = "prisma-client-js"
output = "../src/generated/client"
}
And you should be able to import PrismaClient like this:
import { PrismaClient } from './generated/client'
By generating PrismaClient outside of node_modules should solve your issue.
Is it possible to an Expo app example to load a module located in the parent folder AND to see changes in the example app when i rebuild the package (with tsc -w to rebuild on any saved files)?
I precise that the module is not publish on npm yet.
I've already succeed to do that using monorepo architecture with yarn workspaces and expo-yarn-workspaces package.
But what about the case when you don't want to publish your package like a monorepo?
For example, in this repo https://github.com/cuvent/react-native-vision-camera
There is an example RN app in bare workflow and in its package.json there is no mention of the developed package (meaning that it's not installed like a normal dependency).
But in the app src/App.tsx, the package is used like that :
import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
Though, the react-native-vision-camera is used like it's already and normally installed with yarn or npm.
How does it work ?
Thanks.
Finally, I've found something that works for me.
You can find my config for metro if you want here:
https://github.com/grean/react-native-metro-config-app-example
With it, you can access the parent component from the expo app, modify it and immediately see the hot-reload changes.
Create a file metro.config file in your expo root app directory with that code inside:
let config = require('#grean/react-native-metro-config-app-example/index.js');
module.exports = config
For a whole example, you can check this repo out:
https://github.com/grean/react-native-scale-text
I was told by the project manager at the company I work for to take all the global components of a vue project we're working on and turning them into a single npm package that anyone working on the project can import and start using. essentially I have to take the global components and turn them into a component library like vuetify which is installed using npm and than imported from node modules directory.
I was wondering if you guys could point me in the right direction on how to achieve this. thanks in advance.
So, regardless of the implementation, the main thing you need is following this guide on how to create an npm package
https://docs.npmjs.com/creating-and-publishing-private-packages
Then
You create an src folder.
In the src, you will create a folder named "components" with all your -duh- components.
In the src folder, you will also create an index.js file, from there you will export your components.
export { default as VDataTable } from './components/VDataTable.vue'
// ...etc
Option1
If you use a bundler for your projects, and you know by a fact that all your codebases will use a bundler, you can simply create a folder with a package.json.
In your package.json then you will
"module": "src/index.js",
"main": "src/index.js"
In this scenario, you are letting your main project bundler (which is using the package) transpile all the packages for you, (babel, single file components)
Option 2
In case you have absolutely no clue of the nature of the projects which can use your library you will need a bundler for your components.
An example can be Rollup.
I suggest these 2 guides.
https://rollupjs.org/
https://rollup-plugin-vue.vuejs.org/
Long story short, Rollup will transpile for you the files you requested (js and css), and you will have to make them available from your package.json
"module": "src/dist/library.esm.js",
"main": "src/library.common.js"
And then you can release your package. Possibly privately or you might get fired :P
I am working on a vue project that needs to use another private vue project as a dependency. This other private project is a vue plugin.
I have found how to tell yarn to fetch a package on a private gitlab repository by adding the following line in package.json:
"dependencies": {
"myPackage": "git+https://{token-name}:{token}#gitlab.com/path/to/repo.git#someTag"
}
This works well, and the content of my repo is downloaded in my node_modules. However, here comes my problem :
In this repo, the actual vue plugin is not at the root, it's under a subfolder of the repo, meaning the index.js at the root of the repo is not the one from my plugin (and I guess it is the one yarn will be using).
I have a custom yarn deploy script that compiles my plugin into one JS file and put it in a dist folder, however the dist folder is not versioned. I can use the gitlab CI to generate it, but still i'm pretty sure yarn won't use what is inside the dist folder.
My (broad) question is : how can I use the tools at my disposition (yarn, gitlab-ci) to be able to use my private gitlab repository as a vue-plugin for one of my other project ?
You would tell other packages how to use your packages by using the properties of your package.json. For instance, the main declaration
{
main: 'dist/index.js'
}
This tells node how to resolve your module from your package.
so require('my-vue-plugin') or import MyVuePlugin from 'my-vue-plugin' would resolve to node_modules/my-vue-plugin/dist/index.js, for example.
As far as versioning is concerned -- you don't version the file, or the folder. You version through the version property of your package.json and, in your case, through GIT by using git tag -a v(major).(minor).(patch).
The version that you tag should match the version that you specify in package.json.
I would recommend reading more about semantic versioning and creating a script (like VueJS) to auto-increment your package, version and publish.
According to http://www.slant.co/topics/1089/viewpoints/1/~what-are-the-best-client-side-javascript-module-loaders~browserify#9 one of the downside of using Browserify is that:
Not all javascript libraries have an npm version
While it's not too hard to create npm package for an existing library, it means maintaining it when the library updates. While most libraries are now on npm, many client side specific libraries are not.
I don't have any experience with npm aside from knowing how to install an existing module. In light of that, what is the easiest/best way to browserify with client-side non-npm libraries?
Is there a way for me to declare a local Javascript file as a dependency, instead of looking it up through npm?
You can use local modules without problems by two ways:
1.Use a relative path to a module in require:
var myModule = require('../js/my-module');
2.Use a module name, but before, you should to add it to browser property in package.json:
package.json:
...
browser: {
my-module: './js/my-module.js'
}
app.js:
var myModule = require('my-module');
Some packages are packages with bower, these can be used with browserify by using the debowerify plugin.
For non-versioned things you can copy them to a lib directory in your project or add them as a git submodule and then configure browserify so that it can find things there too.