I am using yeoman webapp generator to generate a template to kick start of my work. At this moment, my bower.json looks like this
{
"name": "sample-project",
"private": true,
"dependencies": {
"bootstrap-sass": "~3.3.5",
"modernizr": "~2.8.3",
"fontawesome": "~4.3.0",
"jquery.smooth-scroll": "~1.5.5",
"animate.css": "~3.3.0",
"jquery.appear": "*"
},
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss",
"assets/fonts/bootstrap/*",
"assets/javascripts/bootstrap.js"
]
}
},
"devDependencies": {
"chai": "~3.0.0",
"mocha": "~2.2.5"
}
}
Now, in cmd prompt I type this while grunt watch is running
bower install bootstrap-datepicker -S
Then I found "bootstrap-datepicker": "~1.4.0" is inserted into the dependencies section, then
<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
will be automatically wiredep into my index.html, it becomes this
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
.
.
<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<!-- endbower -->
<!-- endbuild -->
Then I try to install another bower component to my webapp
bower install country-region-selector -S
The next thing happens is I found "country-region-selector": "~0.1.8" is under dependencies section of bower.json like bootstrap-datepicker, however the corresponding
<script src="bower_components/country-region-selector/dist/crs.min.js"></script>
doesn't get wiredep into my index.html.
So my question is why grunt wiredep doesn't work on some bower components? The same thing happens to form.validation Could anybody shed some light on this problem?
grunt-wiredep works in a very specific way. The dependencies should be listed in an array inside the main property in bower.josn like the example you mentioned from bootstrap.
The problem you are facing is probably those packages doesn't have a main property or it is using multiple files in a string not an array.
To fix that, you can always define an override for the packages main property likes the following ...
In your grunt file:
wiredep: {
...
overrides: {
'package-name': {
'main': [
'link-to-css-file.css',
'link-to-js-file.js'
]
},
},
},
Related
I would like to create a simple npm package and import that into svelte components, however, I cannot seem to use index files to import deeply nested files, e.g.
// routes/test.svelte
<script lang="ts">
import { Test } from '#my-co/my-lib/dist/folder1/folder2/test';
const test = new Test('foo', 'bar');
</script>
works, but
// routes/test.svelte
<script lang="ts">
import { Test } from '#my-co/my-lib';
const test = new Test('foo', 'bar');
</script>
does not. I have the following in the index.ts file in my npm module:
export { Test } from './folder1/folder2/test';
This strangely also does seem to work in ssr (dev server output in console seems to pick the import {Test} from '#my-co/my-lib' correctly), but not in the browser, where I get the error that Test is not a constructor...
Npm library package.json:
{
"name": "#myco/my-lib",
"version": "0.0.2",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "tsc",
"prepare": "npm run build"
},
"author": "redacted",
"license": "ISC",
"dependencies": {
"#types/rosie": "0.0.40",
"#types/slug": "^5.0.3",
"rosie": "^2.1.0",
"slug": "^5.1.1"
}
}
Npm library tsconfig
{
"compilerOptions": {
"declaration": true,
"strictNullChecks": true,
"outDir": "dist",
"moduleResolution": "node",
"module": "es2015",
"target": "es5",
"sourceMap": true,
"lib": ["es2015", "dom"],
"rootDir": "src"
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
Lib structure
my-lib/
| dist/
| node_modules/
| src/
| | folder1/
| | | folder2/
| | | | test.ts
test.ts
export class Test {
foo: string;
bar: string;
constructor(foo: string, bar: string) {
this.foo = foo;
this.bar = bar;
}
testMe() {
console.log("foobar", this.foo, this.bar);
}
}
The svelte-kit package command should automatically do everything for you (docs).
This Youtube video should explain everything.
The steps it provides to publish are:
npm init svelte#next project-name
cd project-name
Create component
npx svelte-kit package
cd package
Login to npm / create an account
npm publish --access public
While Caleb's answer did not really help in my case, I think it was a bit of a pointer as to what was going wrong. I did not intend to write a svelte-focused Component library, but rather a general model/factory library to be reused between the front- and backend.
I did a couple of things since this issue occurred and here is a list of things I think went wrong:
Local linking of the npm package into my project caused issues (npm link). I have very little experience with all the build tools in sveltekit but figured out where those stale/non-functional libs are referenced from. I deleted the node-modules/.vite folder which sometimes resolved my issues (I greped for seemingly cached values which led me to this directory. In my dev experience quite uncommon to have found build artifacts in node-modules, so that was a bit tedious to find in that place).
I converted my npm package to a hybrid ESM/CJS module (previously CommonJS only). I'm unsure whether that resolved the initial issues, but might be worth a try.
I think the main issue was the local linking and some sort of build caching going on in vite.
That being said, I haven't encountered any issues with the library ever since.
I'm trying out the new ASP.NET 5 with MVC 6, and I'm using bower to manage all my client-side dependencies. Everything is working fine.
But I have a question: When I add a dependency (let's say jQuery). It adds both the /dist and /src along with bower configuration files to the /lib folder of wwwroot. How do I make it include just the compiled source for usage? (So I can reference it in my pages via /lib/jquery/jquery.js?
I have recently been playing in this space and following is something that I have tried:
Deleted the .bowerrrc file to enable installing in the default bower_components folder under the project folder rather than under wwwroor\lib as anything under wwwroot tends to get published.
Added "main-bower-files": "2.9.0" to package.json. This package gets all the files mentioned in the main property of each installed package's bower.json files.
Created a gulp task using the above package
gulp.task('copyMainFiles', function () {
return gulp.src(mainBowerFiles(), { base: 'bower_components' })
.pipe(gulp.dest('wwwroot/lib'));
});
Added a postrestore step to your application's project.json file
"scripts": {
"postrestore": "gulp copyMainFiles",
"prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
}
Updated my application's bower.json to copy files which are not listed in main (like some packages do not have min files as main files..ex: jQuery). The following settings are read by main-bower-files:
"overrides": {
"jquery": {
"main": [ "dist/jquery.js", "dist/jquery.min.js" ]
},
"hammer.js": {
"main": [ "hammer.js", "hammer.min.js" ]
},
"bootstrap": {
"main": [
"./dist/js/bootstrap.js",
"./dist/js/bootstrap.min.js",
"./dist/css/bootstrap.css",
"./dist/css/bootstrap.min.css"
]
}
}
Finally had to update the jquery-validation package to use 1.14.0 instead of 1.11.1 as the previous version does not dist folder and indeed no bower.json...
I have just installed React using Bower inside Visual Studio 2015 CTP6.
In Dependencies -> Bower -> React (0.13.0)
I do have React package.(js files are also in bower_components/react folder on disk)
When I try to add script <script src="~/lib/ I do not have React in my list of scripts.
Intelligence not working and JavaScript is not loaded.
in this sample I added a simple rule to copy all the .js files:
{
"name": "WebApplication",
"private": true,
"dependencies": {
"bootstrap": "3.0.0",
"jquery": "1.10.2",
"jquery-validation": "1.11.1",
"jquery-validation-unobtrusive": "3.2.2",
"hammer.js": "2.0.4",
"bootstrap-touch-carousel": "0.8.0",
"react": "~0.13.1"
},
"exportsOverride": {
"bootstrap": {
"js": "dist/js/*.*",
"css": "dist/css/*.*",
"fonts": "dist/fonts/*.*"
},
"bootstrap-touch-carousel": {
"js": "dist/js/*.*",
"css": "dist/css/*.*"
},
"hammer": {
"": "hammer.{js,min.js}"
},
"react": {
"": "*.js"
}
}
}
the result is that when you run install bower task you'll find inside the wwwroot/lib a directory named react with just the ,js files.
I think you have configure the exportsOverride section in the bower.json
I am downloading angular, angular-bootstrap and bootstrap with bower. Bootstrap has a dependency on jquery which is installed in the process. But i don't need it in my project as i am only using bootstrap's css.
So i tried to permanently remove the dependency on jquery with
bower uninstall jquery --save
It's uninstalling jquery, but the next time i make bower update, it's downloaded again.
Is there a way to tell bower to permanently skip a dependency ?
edit: I wish there was something like this:
"resolutions": {
"jquery": "no, thanks"
}
Pull request #1394 added official support for this feature and is present in bower version 1.6.3 and later. Check your version with bower -v, and run npm install -g bower to upgrade.
For reference, please see the .bowerrc official specification document. If this doesn't work for you, please file an issue with bower because it is a bug.
We use it like this in our .bowerrc such as the following:
{
"ignoredDependencies": [
"bootstrap",
"bootstrap-sass",
"bootstrap-sass-official"
]
}
We had a similar situation where we had Backbone depend on Underscore in its bower.json, but we're using Lo-Dash in its stead, so Bower was unnecessarily pulling down Underscore for each install. We have automated checks for 3rd party license compliance, so we didn't want anything we don't actually use.
I realize this isn't exactly what they're meant for, but Bower's install-hooks can be used to clean unneeded deps post-install (at least until Bower gets the sort of "no thanks" resolution you hinted at). In your .bowerrc:
{
"directory": "app/bower_components",
"scripts": {
"postinstall": "rm -rf app/bower_components/underscore"
}
}
It's a bit of a hack, but works.
Something you can do also in your bower.json file:
{
"dependencies": {
...
"bootstrap": "^3.2.0"
}
"overrides": {
"bootstrap": {
"dependencies": []
}
}
}
This means: remove all boostrap's dependencies, which is what you want since jquery is the only one (you can check with bower info bootstrap)
Add it to your .gitignore if you commit your dependencies. Otherwise leave it as it makes no difference. You should just use what you need and ignore the rest.
The above answers are correct but an additional solution is to use wiredep as explained in this answer:
grunt-bower-install: exclude certain components
After installing grunt-wiredep, you can add something similar to this to your Grunt.js to exclude jquery from being injected:
// Automatically inject Bower components into the app
wiredep: {
options: {},
app: {
src: ['<%= my.app %>/index.html'],
exclude: ['bower_components/jquery']
}
},
Bower will still download jquery unfortunately but at least you can tell it not to be included in the HTML src.
DISCLAIMER: This doesn't fix your particular problem, but it helped with mine, so maybe it'll help other people.
I'm using grunt-bower-task to pull the files into a lib directory. I wanted to exclude "angular" and just include "angular.js". One of my dependencies was pulling in "angular". In my bower.json I now have:
{
"name": "myapp",
"version": "0.0.1",
"dependencies": {
"angular.js": "1.3.15",
"angular-bootstrap": "0.13.0",
"angular-cookies": "1.3.15",
"angular-storage": "0.5.0",
"angular-ui-router": "0.2.15",
"mjolnic-bootstrap-colorpicker": "2.1"
},
"exportsOverride": {
"angular": {
"dump": "*.xxx"
},
"angular.js": {
"js": [ "*.js", "*.js.map" ],
"css": "*.css"
}
},
"resolutions": {
"angular": "1.3.15"
}
}
In my gruntfile.js I have:
bower: {
install: {
options: {
targetDir: './lib',
layout: 'byType',
install: true,
cleanTargetDir: true,
cleanBowerDir: false
}
}
},
This stops the "angular" files from being copied to the destination.
I'm experimenting with yeoman and bower.
I have created a yeoman webapp using the following command
yo webapp
I want to use jqueryui so I have installed it using bower:
bower install jquery-ui --save
This works fine, but the jQuery UI component doesn't contain a javascript file with "all" the components, it just contains a lot of javascript files, one for each component.
Should I include only the javascript files that I need? Or should I do something else before using jQuery UI?
Thanks for the tips!
Added jquery-ui in dependencies of bower.json (or component.json) along with jquery.
{
…,
"dependencies": {
"jquery": "~1.9.1",
"jquery-ui": "~1.10.3",
...
},
…
}
Install them:
bower install
Then, added path to jqueryui In main.js and require it:
require.config({
paths: {
jquery: '../components/jquery/jquery',
jqueryui: '../components/jquery-ui/ui/jquery-ui',
…
},
shim: {
jqueryui: 'jquery',
…
},
…
});
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) {
'use strict';
...
});
It works for me.
In the latest jQuery UI bower component as we speak (v. 1.10.3), you can do the following:
For the CSS themes, include the following link:
<link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">
To get the most components and widgets of jQueryUI running, include the following script:
<script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>
For reference, bower install jquery-ui --save would add the jquery-ui.js dependency to the project, but not the styles. For that I needed to add to the bower.json file an overrides section, as below
{
...,
"dependencies": {
...,
"jquery-ui": "^1.11.4" // already added with --save from bower install command
},
...,
"overrides": {
"jquery-ui": {
"main": [
"themes/smoothness/jquery-ui.css",
"jquery-ui.js"
]
}
}
}
References:
https://stackoverflow.com/a/27419553/4126114
https://github.com/taptapship/wiredep/issues/86
I would just include the files that I need or use the default custom build in the folder (which I believe has all the components) if you require everything or if it's just for experimentation.
<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>
At this time bower pulls down the entire repo and since (from their website) "bower is just a package manager" anything else needed like concatenation or module loading is handled by other tools like sprockets/requirejs.
References:
Using packages with bower on homepage http://bower.io/
Dissusion about bower and pulling entire repos
https://github.com/bower/bower/issues/45
You could use requirejs.config's shim property to achieve your goal:
requirejs.config({
shim: {
'jquery.ui.sortable': {
deps: ['jquery', 'jquery.ui.core', 'jquery.ui.widget', 'jquery.ui.mouse', 'jquery.ui.position'],
exports: '$'
}
}
});
We specified, that jquery.ui.sortable, when required in your project, needs to load and execute the modules listed under deps first, before being executed itself.
Unfortunately, this still produces a race condition... But that is generally how one would go about this (: