I have something like this in my bower.json:
"dependencies": {
"web-component-A": "~1.0.0",
"web-component-B": "~1.0.0"
}
In the case that there is a conflict that both components need different versions of some dependency (for instance polymer) bower will prompt a question:
"Unable to find a suitable version for polymer, please choose one by typing one of the numbers below"
Is there an option to download both versions automatically?
Thank you,
Alex
Well you already have the anwser in your Question it is only posible to download it to diffent folders:
"dependencies": {
"polymer": "polymer#2.0.0",
"polymer-legacy": "polymer#1.9.0"
}
But it is not possible to have two diffent version under the same name:
//This does not work!
"dependencies": {
"polymer": "polymer#2.0.0",
"polymer": "polymer#1.9.1"
}
Related
So i've been developing an app for the past few weeks. I have never messed with any json file whatsoever. Today I tried to run my app and it shows a very odd error from Cordova, Error:
Error: Unexpected token in JSON at position 0
The token is ' '?
Which JSON file is it? I went over all the main Json package files, and all of them started with the 0'th token as a '{'.
I'm completely lost, I didn't do anything at all, I didn't add a plugin or something that day it just appeared out of no where.
I have no idea which json files to attach here, there are dozens of them in the project directory.. Any ideas or direction will be extremely helpful, thanks.
Check plugins/*.json
There's most likely an issue hiding in one of those files.
For me it was an unresolved merge conflict inside fetch.json
Run npm install and it will give you more details of the error. In my case, it was an extra comma in package.json. It is a painful bug and I wish cordova explicitly mentioned where this issue was!
You had to check the file fetch.json in Plugins folder. Fetch.json must be encode in UTF8 and at the end of the JSON, the file need to finish correctly, without a comma, like this :
{
"es6-promise-plugin": {
"source": {
"type": "registry",
"id": "es6-promise-plugin#^4.1.0"
},
"is_top_level": false,
"variables": {}
},
"cordova-plugin-nativestorage": {
"source": {
"type": "registry",
"id": "cordova-plugin-nativestorage#^2.3.2"
},
"is_top_level": true,
"variables": {}
} //No Comma
}
Good luck !
My approach to any JSON error:
[optional] Remove/uninstall all plugins
Delete all your platform directory folders (ie. browser, Android, iOS etc,), and delete the package.json file
Note: Don't delete the package-lock.json file
Create a new package.json file by running npm init on your command line (run this command on your Cordova project directory).
Make sure you create this file with the same package name you used before. If you don't remember, you can check the config.xml file (including the 'version').
Reinstall all your plugins (if you followed step 1).
Add your platforms.
Run, build your Cordova project.
If it fails, follow step 1 to the last step.
It works 100℅
If this doesn't work, contact me and send me your issues.
In a bower.json file, what are the resolution and overrides properties used for?
{
"name": "name",
"dependencies": {
"angular": "~1.4.8",
...
"jquery": "2.2.4"
},
"overrides": {
"ionic": {
"main": [
"release/js/ionic.js",
"release/js/ionic-angular.js"
]
}
},
"resolutions": {
"angular-ui-router": "~0.2.15",
"angular": "~1.5.3"
}
}
Resolution
The resolution section appears when you need to resolve dependency versions (after bower install) when conflicts occur. It's for making a decision regarding which concrete version of a dependency to use when the need to resolve dependency conflicts arises - bower automatically injects this decision as the "resolution" record. So the next time a conflict occurs (when updating the dependency tree, etc), the resolved version will be based on the "resolution" data in your configuration file.
Overrides
Overrides section is used to override the file(s) references when pointing to dependent library.
Task runners in most cases use the bower configuration library metadata to inject links to these libraries into a page's content. When we want to inject a bootstrap link into a page, we do not need to go into the "bower_components" folder, find the package, and investigate the file content. We can use the component metadata to find the main, injectable file reference.
The "overrides" section is used to change this data to use another file, or even a set of files, as a package's main entry point.
Multiple Bower packages can list different versions of the same library as a dependency. The resolutions section specifies which version of the library to use whenever this type of situation occurs. If not specified in bower.json, you will receive a command line prompt upon running bower install.
The overrides section makes it possible to override default paths to assets installed through Bower when using a task runner like Gulp. If you intend to move files from their default location in the bower_components folder to accommodate your build process, for example, it could prove handy in this type of setup.
We use resolutions object in your bower.json file to specify the component name & version to automatically resolve the conflict when running bower commands.
Overrides section is used to override the file(s) references when pointing to dependent library.
Some projects I work on use .es6 extension for JavaScript files that import/export using ES6 module syntax.
While webstorm and webpack seem to have no issues with this setup, VSCode gives a red squiggly saying [js] Cannot find module './filename.es6'.
Is there some way to get VS Code to find modules imported that do not have a .js extension? We would like to use .jsx in a similar fashion.
I have this for a .jsconfig:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
},
"files": [
"**/*.jsx",
"**/*.es6",
"**/*.js"
]
}
...and tried adding .es6 under user settings for VSCode, but suspect I did it wrong or that doesn't solve the issue.
I've got a project where src/main/webapp/com/mycompany/frontend/page/index.js depends on target/webjars/log4javascript/1.4.10/log4javascript.js.
I've added package.json alongside index.js with the following contents:
{
"browser":
{
"log4javascript": "../../../../../../../target/webjars/log4javascript/1.4.10/log4javascript.js"
}
}
I've got many other dependencies in the target directory. Is there a way for me to avoid repeating ../../../../../../../target/ for every dependency?
One option is to put the directory that contains your local modules, or a symlink to it, in node_modules, such as node_modules/app and then reference your requires as app/..., e.g. I believe this would work
{
"browser":
{
"log4javascript": "app/target/webjars/log4javascript/1.4.10/log4javascript.js"
}
}
Or you could structure it however you want, e.g. node_modules/log4javascript (which, if you have symlinks, could point to /whatever/target/webjars/log4javascript).
This makes it so that require() will find it in the same fashion as npm modules, without publishing it to npm. The main drawback to this is that it breaks the ability to programatically configure transforms, e.g. with browserify('app/entry').transform(whatever), app/entry and other files in the dependency graph that are under node_modules will not have the transform applied to them.
Check out the section Using Non-Relative Paths in this article.
You can use grunt-browserify's aliasMapping option to specify the root of your app:
aliasMappings: [{
cwd: 'src',
dest: 'myApp',
src: ['**/*.js']
}]
and then you can directly refer to everything from the root path, without having to ever use any dreaded ../'s:
require("myApp/target/webjars/log4javascript/1.4.10/log4javascript.js")
Of course, this doesn't resolve the problem that it's still a very long path.
The article's next paragraph makes a very good point: if you're calling things way over at the other end of your application like that, it's a good sign that things may not be correctly architected.
Can you split the functionality into smaller modules? Perhaps make log4javascript its own module?
Add to my answer, from discussion below:
If log4javascript is in your package.json file as a browser (non-NPM) module, you should just be able to require it with require('log4javascript')
I've installed JSMinifier via Sublime Text 2's package manager and I'd like to set the compiler settings for a specific project.
I can find how to set package specific settings, and I know how to do project specific settings, but is there any way to set project specific package settings?
Try out ProjectSpecific package from PackageControl. I just have added support for
project specific package settings.
Assume you want to turn on "console_log" for scope_hunter.sublime-settings for only
current project, then (after installing ProjectSpecific), add following lines to your
.sublime-project file:
{
...
"settings": {
"project-specific": {
"sublime-settings": {
"scope_hunter": {
"console_log": true
}
}
}
}
}
Seems it cannot be done natively. The package must be programmed to use project specific files (like i.e. SFTP does), but this could be helpful: http://yuji.wordpress.com/2011/07/13/sublime-text-2-beta-project-specific-settings/