bower install 'dev' version of a package doesn't work - javascript

I intend to use a certain feature of angular-datatables, namely: creating filter input fields below individual columns. A demo.
This feature is available only in the dev version of the package.
I set "angular-datatables": "dev" version in my bower.json "dependencies" object, and issued:
$ bower install --save
bower not-cached git://github.com/l-lin/angular-datatables.git#dev
bower resolve git://github.com/l-lin/angular-datatables.git#dev
bower checkout angular-datatables#dev
bower resolved git://github.com/l-lin/angular-datatables.git#3c05e6a2f9
bower install angular-datatables#3c05e6a2f9
angular-datatables#3c05e6a2f9 bower_components/angular-datatables
├── angular#1.2.26
├── datatables#1.10.2
└── jquery#2.1.1
The contents of bower_components/angular-datatables ended up like this.
Next, I tried clearing my browser cache. Repeated the step above, still the version of angular-datatables remains to be 0.2.0.
I also tried issuing bower cache clean, followed by a bower install --save, but in vain.
$ bower info angular-datatables tells me that the following versions are available:
bower angular-datatables#* cached git://github.com/l-lin/angular-datatables.git#0.2.0
bower angular-datatables#* validate 0.2.0 against git://github.com/l-lin/angular-datatables.git#*
{
name: 'angular-datatables',
version: '0.2.0',
author: 'l-lin',
main: 'dist/angular-datatables.js',
ignore: [
'.bowerrc',
'.editorconfig',
'.git*',
'.jshintrc',
'Gruntfile.js',
'test',
'node_modules',
'src',
'.travis.yml',
'vendor',
'data.json',
'data1.json',
'demo',
'favicon.png',
'index.html',
'README.md',
'server',
'styles',
'_config.yml',
'grunt',
'images',
'package.json'
],
dependencies: {
angular: '>=1.2.6',
jquery: '>=1.11.0',
datatables: '>=1.9.4'
},
devDependencies: {
'angular-mocks': '1.2.6',
bootstrap: '3.0.1',
'angular-bootstrap': '0.10.0'
},
homepage: 'https://github.com/l-lin/angular-datatables'
}
Available versions:
- 0.2.0
- 0.1.1
- 0.1.0
- 0.0.3
- 0.0.2
- 0.0.1
Next, I reverted back to v0.2.0, and then used the install command with a #dev suffix.
$ bower install angular-datatables#dev --save
bower angular-datatables#dev not-cached git://github.com/l-lin/angular- datatables.git#dev
bower angular-datatables#dev resolve git://github.com/l-lin/angular-datatables.git#dev
bower angular-datatables#0.2.0 cached git://github.com/l-lin/angular-datatables.git#0.2.0
bower angular-datatables#0.2.0 validate 0.2.0 against git://github.com/l-lin/angular-datatables.git#0.2.0
bower angular-datatables#dev checkout dev
bower angular-datatables#dev resolved git://github.com/l-lin/angular-datatables.git#83ce3847da
Unable to find a suitable version for angular-datatables, please choose one:
1) angular-datatables#dev which resolved to 83ce3847da
2) angular-datatables#0.2.0 which resolved to 0.2.0 and is required by zap-adm-ang
Prefix the choice with ! to persist it to bower.json
? Answer:: 1
This updated my bower.json file, to "angular-datatables": "dev", however when I open the angular-datatables.js file in the bower_components/angular-datatables/dist/ directory, the version still remains 0.2.0. The problem persists.
Here is my discussion of the issue with the angular-datatables package maintainer (in case I missed out on some details).

One possible solution that the package maintainer suggested is to use the following (upcoming) version of angular-datatables:
/*!
* angular-datatables - v0.2.1
* https://github.com/l-lin/angular-datatables
* License: MIT
*/
which is currently available here and should soon be released.
Did the trick for me. The feature is available.
I am still really curious as to why the above-described process of #dev version installation didn't work for me.

Related

Import an external library into a javascript file

UPDATE
I'have purchased a plugin called filePicker that I want to use in one of my vue.js components.
When I tried to import its libraries this way
<script>
import {filepicker} from '../filepicker';
import {filepickerdrop} from '../filepicker-drop';
</script>
When I run npm run dev the 1st time after this, it asked to install this library
npm install --save filepicker
When I did and tried npm run dev the 2nd time, it asked for this
npm install --save fs net tls
I did and run npm run dev a 3rd time, it asked me for this
npm install --save fs
This dependency was not found: * fs in ./node_modules/request/lib/har.js
Problem: It keeps asking me to install this fs library.
These installs have updated my package.json to this
"dependencies": {
"filepicker": "^0.2.0",
"fs": "0.0.1-security",
"net": "^1.0.2",
"tls": "0.0.1"
}
This shows that the library FilePicker has been successfully installed, but the library fs-security that it's using is nowhere to be found.
This https://www.npmjs.com/package/fs mentions that "this package name is not currently in use." What does this mean?
LakiGeri, has suggested to locally install the FilePicker according to this post. The errors show above that fs is the one who needs to be installed. And I don't have this library to install it.
LakiGeri also suggested to follow the doc specifications. I'm not even able to import its libraries, so how can even start to work on its configuration.
The third advise was to manually update the dependencies in the package.json file. It has already been updated.
I also opened an issue on npm github repo. I still have no feedback there.
The plugin author has just replied and updated his sittings.
Add the following in webpack.mix.js with the following:
const path = require('path')
mix.webpackConfig({
resolve: {
alias: {
'filepicker': path.join(__dirname, './resources/assets/js/vendor/filepicker'),
'filepicker-ui': path.join(__dirname, './resources/assets/js/vendor/filepicker-ui'),
'filepicker-drop': path.join(__dirname, './resources/assets/js/vendor/filepicker-drop'),
'filepicker-crop': path.join(__dirname, './resources/assets/js/vendor/filepicker-crop'),
'filepicker-camera': path.join(__dirname, './resources/assets/js/vendor/filepicker-camera'),
}
}
});
Now you can import the Filepicker files like this:
import 'filepicker';
import 'filepicker-ui';
import 'filepicker-drop';
import 'filepicker-crop';
import 'filepicker-camera';
Now it works.
Big thanks to LakiGeri for being the only one helping.
I ran some search, and this js lib of the filepicker package is not available on npmjs.com. But you can install the lib from local (check this answer), or you can add the path of the lib in the package.json like this. After you imported it, I think you should do nothing, but if it will not work, you have to init this lib as its doc says.
I hope it helps!

Babili minifies but does not transpile

I am stuck with babili.
I need to transpile, then minify the javascript that is written in ES6. So I installed the package using:
npm install babili --save-dev
and made .babelrc file containing a preset:
{"presets": ["es2015"]}
Now I tried the following command
./node_modules/.bin/babili public/js/rt.socket.js --out-file public/test.min.js
It does give a minified but doesn't transpile. What could be the reason for this?
`
Babili does not use .babelrc. Per the README:
Note that, because the babili command uses the default preset with no-babelrc, you cannot set any non-default options in the preset's plugins with this command. To do this, you can use the babel command with the options set in a .babelrc. See the preset docs for more information on how to do this.
The solution is to instead use Babel with the babel-preset-babili preset, as described in the Babel preset section of the README (which assumes that you've already installed Babel):
Install
npm install babel-preset-babili --save-dev
Usage
You'll most likely want to use it only in the production environment.
Check out the env
docs for more help.
Options specific to a certain environment are merged into and overwrite non-env specific options.
.babelrc:
{
"presets": ["es2015"],
"env": {
"production": {
"presets": ["babili"]
}
}
}
Then you'll need to set the env variable which could be something like
BABEL_ENV=production npm run build

Protractor/node versions compatibility

I'm using protractor for e2e testing and grunt-task-runner package to run tests.
In my package.json file I have:
{
...,
"grunt-protractor-runner": "^2.1.2",
...,
"protractor": "^2.5.1",
...
}
And in my protractorConfig.js I use framework: 'jasmine2'
My intent is to use protractor 2.5.1 + grunt-protractor-runner 2.1.2 for node version 0.12.9, and to use protractor 3.0.0 + grunt-protractor-runner 3.0.0 for node version >=4.x.
The fact is, that when I run npm install either using node version 0.12.9 or 5.4.1, I always have the same protractor version in node_modules folder - 2.5.1 and corresponding grunt-protractor-runner.
What am I doing wrong?
Any ideas would be highly appreciated.
You could try using the engines field:
{ "engines" : { "node" : ">=0.12.9 < 4" } }
But I don't think you can specify different versions of packages to install depending on the Node version.

r.js can't build because of ENOENT error...says it can't find ".bin/bower"

I'm trying to get r.js to optimize all my Require-related files but am getting an error.
My site is in a directory called "myCrazysite" and is structured like this :
(not all the files)
myCrazysite
js/
buildform.js
search.js
app.build.js
vendor/
jquery
r.js
app.build.js looks like this:
({
appDir: "../",
aseUrl: "js",
optimize: "none",
dir: "buildOut",
modules: [
{
name: ["buildform", "search"]
}
]
})
I'm going into js/ and runningnode ../r.js -o app.build.js. I've also globally installed the CLI tool with npm and run r.js -o app.build.js from same directory.
When I do either of these two things, I get the following error:
ENOENT, no such file or directory '/Users/me/Sites/myCrazysite/node_modules/.bin/bower'
at Object.fs.statSync (fs.js:684:18)
The steps I've taken are:
navigated to to the above mentioned ".bin" directory on the CLI..the
bower directory is there.
upgraded to node v0.10.18
uninstalled & reinstalled bower
uninstalled the CLI tool and run node ../r.js -o
app.build.js
globally reinstalled the CLI tool back, deleted r.js
from the site root, navigated to js/ and run r.js -o app.build.js
I'm using require v.2.1.8.
Never mind...I figured it out.
The issue was that the .bin/bower file was causing some conflict and just needed to be deleted. It was a stray shortcut file from (I think) a bower-related grunt plugin. As I wasn't using the plugin, I just used npm to uninstall it, then hard-deleted the file .bin/bower.
Moral of the story: the command line always tells you what to do...usually.

Installing jQuery-Mobile via bower

In my project I would like to use jquery-mobile via bower.
Before I can use it I have to run npm install and grunt subsequently inside of bower_components/jquery-mobile before I can use the minified .js and .css files.
This is quite tedious and if I had to do this for every library that I use, I guess I would fallback to just downlading the files and add them to my project.
So is there a more elegant way to get to those "final" files via bower dependency?
My bower.json
"dependencies": {
...
"jquery-mobile": "latest",
}
The fact of having to run npm/grunt process (or not) is up to each author. In the case of jQuery Mobile, probably some external user has registered it without noticing that it needs to run Grunt tasks; Bower unfortunately allows everyone to register packages (is that bad or good? :S).
Also, there may exist some Grunt task to install bower dependencies and run their Grunt tasks aswell; if there aren't, it's not too complicated to create one.
Anyway, as it seems that you're in a "hurry" for those final, compiled files, there is jquery-mobile-bower, which has been created and registered into Bower a few hours ago.
bower install jquery-mobile-bower
Let's just hope that this gets maintained and up-to-date.
Just so you're aware, there is an official jQuery mobile Bower package available. It can be installed via:
bower install jquery-mobile
Its GitHub endpoint can be found here.
I'm not sure if my solution is optimal, but I removed jquery-mobile from bower.json and I'm installing and building it with Grunt, using grunt-contrib-clean, grunt-git and grunt-run plugins. I came up with this, because I don't want to use jquery-mobile-bower, because it's an unofficial repo.
Here's an example Gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
clean: {
jquerymobile: 'bower_components/jquery-mobile'
},
gitclone: {
jquerymobile: {
options: {
repository: 'https://github.com/jquery/jquery-mobile.git',
branch: 'master',
directory: 'bower_components/jquery-mobile'
}
}
},
run: {
options: {
cwd: "bower_components/jquery-mobile"
},
jquerymobile_npm_install: {
cmd: "npm",
args: [
'install'
]
},
jquerymobile_grunt: {
cmd: "grunt"
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-git');
grunt.loadNpmTasks('grunt-run');
grunt.registerTask('default', [
'clean',
'gitclone',
'run'
]);
};
More details can be found here https://github.com/jquery/jquery-mobile/issues/7554

Categories