I havew created a new Asp.net core project and im trying to install Knockout.js, im doing so by following Knockoutjs install
Problem is, i add the knockout to my bower (latest version 3.4.0 not 3.3.0).
"knockout": "^3.4.0"
}
I hit save, then go to the wwwroot/lib folder and Knockout folder is there.
However it looks like this ...
As you can see there are 2 folder src and build but no knockout.js, infact the whole directory doesnt contain a knockout.js file.
So im wondering whats the issue here? did something change and made the tutorial not valid? Am I doing somethiong stupid here?
EDIT: I have a feeling this is the source and needs building not sure though
EDIT2: Heres the Gruntfile.js located in proj source used in conjuntion with the trask runner as per the tutoriual i was following.
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
}
});
grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
};
I think my gruntfile is missing some key stuff here, just not sure what (not well versed in grunt im afraid)
Bower pulls the whole package and puts it into "bower_packages/package_name" folder. You can force bower to change default destination directory (in your case it is "wwwroot/lib" folder) but it still gets whole package.
In order to put in the "wwwroot/lib" folder only package build results (files mentioned in the package's bower.json main" property) I'm using "bower-installer" tool. It calls bower to get packages and then gets "main" files for each package and put them in destination folder.
Update 1
bower.json
{
"name": "_______",
"version": "0.0.0",
"dependencies": {
"jquery": "~2.1.0",
"jqueryui": "~1.11.4",
"knockout": "^3.4.0"
},
"install": {
"path": "wwwroot/lib",
"sources": {
"knockout": {
"mapping": [
{
"bower_components/knockout/dist/knockout.debug.js": "knockout.js"
}
]
}
}
}
}
Presumable bower and bower-installer packages are installed globally.
Just create bower.json file in any empty folder and run "bower-installer" command from command line in this folder. You should get "bower_components" folder with full package and "\wwwroot\lib\knockout\knockout.js" file. I've just checked it.
Related
I am using NPM as package manager.
These are the dependencies of my project:
"dependencies": {
"litepicker": "2.0.11",
"moment": "2.29.1"
}
I wanted to get litepicker.js and moment.js to my src/ folder automatically.
What's the best way of doing this?
I want to create a plugin so that I can raw-load a certain type of file with parcel. Parcel docs states that:
Publish this package on npm using parcel-plugin- or #your-scope/parcel-plugin- prefixes, and it will be automatically detected and loaded as described below.
...
Any dependencies listed in package.json with these prefixes will automatically be loaded during initialization.
Since this is a one-time thing, I don't want to publish the code on npm as a plugin. How do I load my project-local plugin with parcel?
Thanks in advance.
Since I could not find a way to do this in a parcel way, I did this in an npm way:
I created a folder named local_modules (this can be anything you want.) Then created parcel-plugin-x inside local_modules. Inside that, I created my plugin as usual. I also created a package.json specifying the entry point main. You can specify the dependencies required for the module just like if this is a separate project (THIS IS!).
{
"name": "parcel-plugin-x",
"version": "0.1.0",
"description": "Parcel plugin x",
"main": "index.js",
"devDependencies": {
},
"dependencies": {
}
}
Directory structure:
project-folder---local_modules---parcel-plugin-x
|---package.json |
|---index.js
|---package.json
Then I ran npm i --save-dev .local_modules/parcel-plugin-x inside the project-folder. It adds the line "parcel-plugin-x": "./local_modules/parcel-plugin-x", to the root package.json. This is the standard way of loading local modules in npm. And everytime you make changes to the plugin, you have to run npm upgrade. You should also increase the version of your plugin, too. This copies the plugin to node_modules and install dependancies.
According to the parceljs docs:
Any dependencies listed in package.json with these prefixes will
automatically be loaded during initialization.
now it works! :)
I did something similar, but with npm link.
In plugin folder (parcel-plugin-x) just run: npm link.
In the project folder using the plugin:
Link to parcel-plugin-x: npm link parcel-plugin-x
In package.json file, manually add the dependency to parcel-plugin-x
package.json
"devDependencies": {
"parcel-plugin-x": "^0"
}
Each time you make changes to the plugin, you don't have to run npm upgrade, but you might have to remove .cache folder created by parcel, because parcel will skip processing cached assets.
I think you can do this with the workspaces option in package.json: https://docs.npmjs.com/cli/v7/using-npm/workspaces
This library seems to be implementing it: https://github.com/astegmaier/stackoverflow-parcel-namer
From what I understand, the common way to deploy a Javascript app is to take all your dependencies and put them all in one file (and then minify it). I don't understand how the code I wrote will then find the modules that are now all in this new file. I'm using node.js if that matters and use a gulp task like this to do the bundling:
gulp.task('bundle_deps', function() {
return gulp.src('src/**/*.js')
.pipe(concat('bundle.js'))
.pipe(gulp.dest(deploy_dir));
});
If you're talking about deployment, then the way to do this in node.js is to put your dependencies in the package.json file. For example:
{
"name": "yourAppName",
"version": "0.0.1",
"dependencies": {
"restify": ">= 2.6.0",
"node-restify-validation": "0.0.6",
"node-restify-swagger": "0.1.6"
}
}
See: https://docs.npmjs.com/files/package.json#dependencies
Then when you deploy the application, copy your code to the server and run the command
npm install
npm will read the dependencies in the package.json file and install them all for you.
I've started to use bower-rails to manage css/js assets in my rails projects.
By default the dependences are being installed in vendor/assets/bower_components.
The problem is that bower copies the whole packages, including sources, examples, licenses, etc.
I don't have problem to get rid of all those files, but I'm wondering if is necessary to include even the important files, as I think it should be the programmer's responsibility to load those dependences in the computer where is loading the project(maybe with grunt?), besides is supposed you should not touch the vendor packages as they are not your responsibility(regarding all those crappy files I want to delete).
My point is: Is there any kind of "best practice" related with bower packages and version control?
I recently used bower-rails for the first time and had Git ignore the vendor/assets/bower_components directory to good effect.
If you choose to have Git ignore bower_assets, you SHOULD specify a known good version of each library in bower.json instead of using latest to avoid version conflicts.
I'm using bower and bower-installer in my Rails 4.2.x app, without using any gems for javascript dependencies. I'm still using the asset pipeline.
I added vendor/assets/bower_components to my .gitignore file. I use bower-installer to copy just what I need to vendor/assets/{javascripts,stylesheets}, which are in source control.
I think that this gives me the best of both worlds: version control of JS libraries so updates are relatively easy, but no chance of a production deploy failing because someone removed 'leftpad' from the node repo.
Here's a trimmed-down version of my bower.json file (in source control). Note that jquery-form is not in the bower repo, so I included the path to the download file.
{
"name": "icots",
"main": "",
"private": true,
"ignore": [
"**/.*",
"bower_components",
"vendor/assets/bower_components",
"lib"
],
"dependencies": {
"jquery": "^3.1.1",
"jquery-ui": "^1.12.1",
"jquery.form": "http://malsup.github.io/min/jquery.form.min.js"
},
"install": {
"path": {
"js": "vendor/assets/javascripts",
"css": "vendor/assets/stylesheets",
"/[sc|le]ss$/": "vendor/assets/stylesheets"
},
"sources": {
"jquery": "vendor/assets/bower_components/jquery/dist/jquery.min.js",
"jquery-ui": "vendor/assets/bower_components/jquery-ui/jquery-ui.min.js",
"jquery-form": "vendor/assets/bower_components/jquery.form/index.js"
}
}
}
While staging with grunt (grunt serve) I am getting:
Running "bower-install:app" (bower-install) task
popcornjs was not injected in your file.
Please go take a look in "app\bower_components\popcornjs" for the file you need, then manually include it in your file.
I have added Popcorn.js to bower.json:
{
"name": "NAME",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
.
"popcornjs": "~1.3.0",
.
"angular-slugify": "1.0.0"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
So as to my index.html:
<s_cript src="bower_components/popcornjs/popcorn.js"></script>
<s_cript src="bower_components/popcornjs/modules/player/popcorn.player.js"></script>
<s_cript src="bower_components/popcornjs/players/youtube/popcorn.youtube.js"></script>
<s_cript src="bower_components/popcornjs/plugins/code/popcorn.code.js"></script>
.'.'
Am I doing missing something? The other libraries working fine.
I just did a quick search on popcornjs. The repo you pull from when you say bower install --save popcornjs is https://github.com/mozilla/popcorn-js/. That repo has a bower.json file, and that file has a main property in it. That property tells grunt-bower-install what file to inject in your HTML.
However, you are using version ~1.3.0, which would pull down this: https://github.com/mozilla/popcorn-js/tree/v1.3.0. That doesn't have a bower.json, thus grunt-bower-install has no way of knowing what file to include.
The solution is to manually include it in your HTML, or upgrade to the newer version that uses Bower properly.