How to use (environment) variables for a package.json dependency in npm? - github

In npm, I want to be able to install a package from a private GitHub repo as a dependency through the git+https way without having to hardcode the actual github_username:personal_access_token, but rather plug them into the dependency string as (environment) variables.
So instead of
package.json:
...
"dependencies": {
...
"my-private-github-repo": "git+https://<github_username>:<personal_access_token>#github.com/some/package.git",
...
}
I would like something like this:
package.json:
...
"dependencies": {
...
"my-private-github-repo": "git+https://${github_username}:${personal_access_token}#github.com/some/package.git",
...
}
Hardcoding credentials is a major no-no when applying version control to package.json which I'd like to be able to do.
What is the best way to do this?

Create .env file at the same directory level where package.json resides.
Mention PERSONAL_ACCESS_TOKEN=******************************* into .env file
Don't forget to add .env into .gitingore list which will prevent exposing key to outside world while you make git commit to your repo.
Now you can add your dependency in package.json as below,
"dependencies": {
...
"my-private-github-repo": "git+https://${ENV.PERSONAL_ACCESS_TOKEN}#github.com/USER/abcd-repo-3.4.0.git",
...
}
There are other ways using 'DOTENV' npm package, but it could not do much when we are trying to resolve "Github" package dependency. Above seems to be straight forward solution.

Related

Babel: root programmatic options

I seem to absolutely not grasp where to put root programmatic options for the babel.
If I have a monorepo and need to tell the different sub packages that they shall look upwards for my babel.config.js then I should put rootMode: "upwards" into the .babelrc of the sub packages, correct? This does not work, because of the resulting error
Error: .rootMode is only allowed in root programmatic options
Somehow I simply can't find any example of where to put/use root programmatic options... Can anyone point me to the right direction?
If you are using Webpack, you need to put it there.
module: {
[..]
rules: [
// Transpile ES6 Javascript into ES5 with babel loader
{
test: /\.jsx?$/,
exclude: [/node_modules/, /json/],
loader: 'babel-loader',
options: {
rootMode: 'upward'
},
},
[..]
],
[..]
},
Otherwise I had the same issue than you, I can't put it in the package.json file using the key babel.
Any API-related options are called programmatic options. Take a look at my discussion with the primary maintainer of Babel: https://github.com/babel/babel/discussions/14405.
It's when you specify them directly to Babel (babel.transformSync(code, programmaticOptions) or to the Babel integration you are using (e.g. babel-loader, which can pass them to its internal babel.transform call). In other words, not in presets or config files. [...]
by #nicolo-ribaudo - Babel core team.
I got this error using my (probably non-standard) monorepo setup where I have top-level subdirectories for each of my packages. No top-level package. When I upgraded to Babel 7, my Jest tests were no longer transforming packages that were yarn linked into the package where I was running Jest.
I added a top-level babel.config.js as part of Babel's monorepo instructions. I had rootMode: "upwards" in these three places:
ui-package/webpack.config.js for transforming the app.
ui-package/babel-jest.js for the tests, where it appeared like:
module.exports = require("babel-jest").createTransformer({
rootMode: "upward",
})
and was referenced from jest.config.js in that same dir like:
transform: {
"^.+\\.jsx?$": "./babel-jest.js",
},
And in /babel.config.js, the newly added top-level babel conf file.
Removing it from the last one removed the error.

babel-loader not transpiling packages in node_modules even after specifying in exclude block to ignore the package (lerna)

So I am trying out monorepo design with lerna for our react applications.
the idea is to create one repo which will have all the react projects as lerna packages as well as some common modules/components which are shared across the applications.
now all these common modules/components are es6 modules. which are not transpiled. because there is continuous development going on the common modules as well. and if we build/transpile them I am sure react HMR will not work after that (a wild guess). following is my directory structure
package.json
lerna.json
|--packages
|--common
|--react-app
|--constants
|--utilities
common contains common react elements like table,accordion etc. which are exported as default es6 modules.
react-app imports common as dependency. react-app has webpack build configuration set.
now when i import common module into my react-app babel transform fails with this error
Button.component.jsx 7:19
Module parse failed: Unexpected token (7:19)
You may need an appropriate loader to handle this file type.
| const { Search } = Input;
| class TextBoxWithButton extends React.Component {
> static propTypes = {
| placeholder: PropTypes.string.isRequired,
| onAction: PropTypes.func.isRequired,
# ./src/App/Modules/Todo/Components/Header/Header.component.jsx 10:0-111 16:25-41
# ./src/App/Modules/Todo/Todo.component.jsx
# ./src/App/Router/index.jsx
# ./src/App/Layout/index.jsx
# ./src/App/index.jsx
# ./src/App.hot.js
# ./src/index.jsx
which means babel-loader is unable to parse and transpile whats in the node_nodules folder which makes sense because all dependencies are expected to be already transpiled. but not always. if you manage local dependencies you cannot keep them build all the time (that's what i think)
now I have found some solutions online that enable 1bable-loader not to exclude node_modules or ignoring #mypackagein exclude regex. but nothing is working in my case.
here is what i have tried so far.
remove exlucde: /node_modules/ from babel-loader => not working
use require.resolve('babel-loader') => not working
add resolve.symlinks= false.
add resolve.modules='node_modules' or
path.resove(__dirname,'node_modules') => not working
add packages path to babel-loader include include: [srcPath, lernaPackagesPath],
nothing seem to work.
is there something that i am missing ?
here is the link to my git test repo.
babel-loader by default will not transpile anything that is in node_modules. you can explicitly say what to transpile in node_modules but after #babel7.0.0 that doesn't seem to work either.
there is also a scope of .babelrc which was introduced in #babel7.0.0.
according to the research i did in under normal circumstances node_modules expect to have transpiled commonjs or umd modules. which can be imported by any application. in my case my packages/components where all es6 modules which needed to be transpiled. and my webpack build was failing because babel-loader was simply ignoring them.
so i decided to use #babel/cli to transpile each package where my components reside i had to add .babelrc along with other configurations to my component packages and build them with #babel/cli
here is the scripts in my package.json
"scripts": {
"start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
},
and my package.json looks something like this after that
{
"name": "#pkg/components",
"version": "1.0.1",
"description": "a repository for react common components. may or may not be dependent on elements",
"main": "dist/index.js",
"author": "hannad rehman",
"license": "MIT",
"scripts": {
"start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
},
"dependencies": {
"#pkg/constants": "^1.0.1",
"#pkg/elements": "^1.0.1"
},
"peerDependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-router-dom": "^4.3.1"
}
}
with this approach. all of my common packages will be unit tested, linted and built before any application can import them. babel has a watch mode which will make sure transpilation happens always when a change occurs.
lastly and most importantly react HMR works as expected.
UPDATE
the above solution definitely works but after months i changed it by using include property in the babel loader
{
test: /\.js(x?)$/,
include: [/node_modules\/#pkg/],
use: [
'thread-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
configFile: path.resolve(
__dirname,
'../../../../',
`${env.appConfig.folderSrc}/babel.config.js`,
),
},
},
],
}

How to exclude certain files from a package managed by jspm and systemjs?

For instance with bower I could do something like this to get only the scss files (excluding js):
{
"dependencies": {
"bootstrap-sass": "~3.3.5"
},
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss"
]
}
}
}
I am having an hard time understanding how to do it with systemjs. in the config.js file I guess but even reading the docs I could not figure it out.
My use case is: while developing I am loading Material angular with systemjs but I want to load only the js files, not the css, which I want to manage indenpdently in my scss. Instead systemjs keep loading the file angular-material.css. I just started with systemjs and jspm, hope you can help.
nb: my problem is not related to the jspm build or bundle process but to the development time with these tools.
JSPM supports overrides as well. See https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#testing-configuration for configuration options.
Using JSPM overrides you can easily override the main file and directories and files that you need from a module.
Upd. The css dependency is defined in the registry: https://github.com/jspm/registry/blob/974beb8b6520f4c1b3c6373db32ad05da5c82446/package-overrides/github/angular/bower-material%400.4.0.json It needs to be overwritten with the local override.

Git hook update package json version

In our project we often forget to update version numbers in Package.json file. Ours is a AngularJS project. In our package JSON file we are specifying the below two version information
"version": "1.0.7",
"devVersion": "1.0.4"
Before Merging a branch to develop I want a automated script to update these above two version numbers. I am thinking Git Hooks will help me.
Where can i find the hooks, I am able to see the hooks in my local repo under .git folder. I am confused which hook to use. Searching on Google suggests I have to create hooks on server.
Where can i find them and can i update the above both keys (version and devVersion) ?
Pls suggest the location and hook to use, this will solve a lot of problem.
I am using husky and git-branch-is:
"scripts": {
...
"postmerge": "(git-branch-is master && npm version minor ||
(git-branch-is dev && npm --no-git-tag-version version patch)",
...
},
Read more about npm version
Webpack or Vue.js
If you are using webpack or Vue.js, you can display this in the UI using Auto inject version - Webpack plugin
NUXT
In nuxt.config.js:
var WebpackAutoInject = require('webpack-auto-inject-version');
module.exports = {
build: {
plugins: [
new WebpackAutoInject({
// options
// example:
components: {
InjectAsComment: false
},
}),
]
},
}
Inside your template for example in the footer:
<p> All rights reserved © 2018 [v[AIV]{version}[/AIV]]</p>
You have two kinds of hooks (both present in any .git/hooks folder): server and client hooks.
They are listed in "Customizing Git - Git Hooks"
A merge is a local operation, so if you wanted to automate any process during a merge, you would need a client hook, like a post-commit hook (meaning executed just after creating a merge commit).
If you need to update that file before a merge, you can try a pre-commit hook, and check if a merge is in progress (if not, your pre-commit hook would do nothing since you want to update the versions only before a merge).
You can see in this answer an example of a post-commit hook which generates a version.json file.
If is written in node, but you can write a hook ni any scripting language you want.
With Husky, it's extremely simple:
{
"name": "demo-project",
"version": "0.0.3",
"husky": {
"hooks": {
"pre-commit": "npm --no-git-tag-version version patch && git add ."
}
}
}
Note: I put git add . in the end because after we update package version, we need to stage it

How do I configure the output-path of ember-cli as a setting?

I'm using ember as part of a bigger project and so both dev and production build into a subdirectory somewhere else. Can I specify output-path as a setting rather than on the commnad line?
You could modify your package.json and add in the scripts there such as:
"scripts": {
"buildprod": "ember build --environment=production --output-path=yourProdPath",
"builddev": "ember build --output-path=yourDevPath"
}
And just run them in the cli npm buildprod.
Create a file named .ember-cli inside the app folder and mention the output path. Ember will recognize the path automatically when we do "ember build"
{
"outputPath" : "D:/MyApplication/working/ember"
}