I have a question regarding loading the dependencies using Bower.
I have bower.json like
{
"name": "My project",
"version": "0.1",
"dependencies": {
"angular": "~1.2.0",
"angular-bowser": "~0.0.1"
}
}
//I want to add alert.js dependency
I was hoping to add a custom bootstrap JS file that is only for alert. I am not sure how to add the custom file since I can't run bower install to install the custom file.
Any tips? Thanks a lot!
You add bootstrap as a Bower dependency. Then in whatever other tool you're using to either generate <script> tags or generate a single concatenated JS file, you add Bootstrap's alert.js (and any other Bootstrap jQuery plugins that Alert depends on) to the list of required JS files.
Speaking more generally, Bower is an pretty minimalistic package manager, to the point that it is arguably not very useful, as it provides relatively little metadata and leaves many issues to instead be dealt with by other tools or by the user manually. Hence, what you're asking for here goes beyond the realm of Bower itself.
Related
I was told by the project manager at the company I work for to take all the global components of a vue project we're working on and turning them into a single npm package that anyone working on the project can import and start using. essentially I have to take the global components and turn them into a component library like vuetify which is installed using npm and than imported from node modules directory.
I was wondering if you guys could point me in the right direction on how to achieve this. thanks in advance.
So, regardless of the implementation, the main thing you need is following this guide on how to create an npm package
https://docs.npmjs.com/creating-and-publishing-private-packages
Then
You create an src folder.
In the src, you will create a folder named "components" with all your -duh- components.
In the src folder, you will also create an index.js file, from there you will export your components.
export { default as VDataTable } from './components/VDataTable.vue'
// ...etc
Option1
If you use a bundler for your projects, and you know by a fact that all your codebases will use a bundler, you can simply create a folder with a package.json.
In your package.json then you will
"module": "src/index.js",
"main": "src/index.js"
In this scenario, you are letting your main project bundler (which is using the package) transpile all the packages for you, (babel, single file components)
Option 2
In case you have absolutely no clue of the nature of the projects which can use your library you will need a bundler for your components.
An example can be Rollup.
I suggest these 2 guides.
https://rollupjs.org/
https://rollup-plugin-vue.vuejs.org/
Long story short, Rollup will transpile for you the files you requested (js and css), and you will have to make them available from your package.json
"module": "src/dist/library.esm.js",
"main": "src/library.common.js"
And then you can release your package. Possibly privately or you might get fired :P
Installing Datatables, Editor and their options (Select, RowGroup etc.. ) can be quite tricky with the official npm installation. You have to install multiple dependencies, be cautious of the CSS versions you import and so on.
I had an hard time dealing with it so I share you a quite straightforward solution.
Datatables offers an excellent download option in the download builder, which allows you to the styling, packages and extensions you want and download them in a single folder.
So first of all:
pick the configuration you want and then download the files (with concatenate option).
Then :
Copy the Datatable package into some local directory.
Add a package.json file with the following
{ "name": "datatables-bundle",
"version": "1.10.16",
"description": "Datatables bundled",
"main": "datatables.js",
"author": {
"name": "SpryMedia Ltd",
"url": "http://datatables.net"
}
}
go to your project directory
Call npm install ../datatables-local-package-path.
Once this is done, I can require the bundled package with a single line:
window.dt = require('datatables-bundle');
for CSS :
//Datatables styles
#import "~datatables-bundle/datatables.min.css";
... and this works!
Editor and Tables are fully functional so are the options (select, RowGroup...).
It spares the difficulty of installing separately all the npm packages, the post install process (for Editor's licence) and so on.
Of course the package won't update by itself but this is a minor issue.
I'm looking for the best way to arrange my code base with common resources shared between different projects. I have three aurelia apps. In each one, I added some resources in its resources folder (custom elements, attributes, etc). When I needed one already wrote in another project, I just pasted it. Now I have time to refacto, I'd like to move all this resources in a dedicated repository. Then I want to be able to pick only the resources I need in each project.
I've tried by putting all me resources in a repo with a gulp build task from aurelia skeleton which allow me to build AMD modules of all my modules. Then, I've been able to load some modules individually by adding them in aurelia.json. For exemple for an attribute:
{
"name": "aurelia-resources-progress-button",
"path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/attributes",
"main": "progress-button"
}
or a custom element:
{
"name": "aurelia-resources-avatar-upload",
"path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/elements/avatar-upload",
"main": "avatar-upload",
"resources": [
"avatar-upload.html",
"avatar-upload.css"
]
}
It worked like a charme but it failed for a value converter which import a module from relative path.
The file is located in :
"projectRoot/node_modules/SHG-aurelia-resources/dist/amd/resources/value-converters/duration-format.js",
it import from '../utils./strings'
and
I get the following error when I au run:
"Error: ENOENT: no such file or directory, open
'/Users/hadrien/Documents/dev/SportHeroes/united-heroes/src/resources/utils/strings.js'".
The strange thing is when I require a relative module from a template (like in my progress-button custom attribute) there is no problem.
I don't want to make a plugin because I don't want to load every modules of my repo. What I'd like, if it is possible, would be to be able to set .feature('../node_modules/path/resources') and load them like I load my local resources.
What should I do ?
I'm answering the question as reworded in the comments above.
If you have an npm package, you can simply require in resources from it using a require element. This npm package could package itself as a plugin, and you simply choose not to load it that way as you only want a subset up the stuff it provides.
I've created a set of sample projects that show this off: https://github.com/AshleyGrant/sample-app-so41961759
This application has a dependency on https://github.com/AshleyGrant/sample-resources-so41961759/
This dependency packages itself as a plugin, but it also can be consumed piecemeal as I am doing in the application by only using one of the two resources the plugin has. Note that the other resource isn't loaded since I'm not using it.
This is what it looks like in the app when I pull in a resource from within the dependency:
<template>
<require from="sample-resources-so41961759/custom-elements/my-echo"></require>
<h1>${message}</h1>
<my-echo say="Echo!"></my-echo>
</template>
I see repositories like bootstrap starting to include additional tags in their package.json file such as 'style' and 'less.' How can I use these tags to import assets?
package.json
{
"name": "bootstrap",
"style": "dist/css/bootstrap.css",
"sass": "scss/bootstrap.scss",
"main": "./dist/js/npm"
}
I am using ES6 modules and webpack. I want to do be able to import my stylesheets using the style tag in package.json.
Currently I am doing something like this:
my_stylesheets.less
#import "~bootstrap/dist/css/bootstrap";
which is annoying for consumers to add the path when it is available in package.json. Is there a way I can import stylesheets using the tag in package.json?
If I cannot use the tag in package.json, is there a standard way of importing stylesheets in ES6 modules?
Yes!!! Webpack treats everything as a module, including that cute little package.json in your repo.
Therefore, you simply need to require() it into your app and then access properties from that json object. (See json-loader for more info).
I often use this to import data like version number etc for my Webpack config file for bundling and versioning.
This feature is not included in webpack for now. There is an open issue about this in webpack's CSS loader repo.
There is also an SO thread on the use of the style field, and it seems that there are some npm / browserify tools that support this.
I'm trying to refactor a library that uses Browserify by shimming certain modules out of the bundle using browserify-shim. Specifically, the library uses require("codemirror") but I want to provide a bundle that doesn't include CodeMirror but will rather use one that is provided via CDN.
So I've got browserify-shim config in my package.json like
"browserify-shim": {
"jquery": "global:jQuery",
"codemirror": "global:CodeMirror"
}
So far so good. require('jquery') and require('codemirror') have disappeared from the browserified bundle and been replaced by the expected code snippet to grab jQuery and CodeMirror off of the window object.
The library also requires some CodeMirror add-ons. For example require('codemirror/addon/hint/show-hint.js'). That's fine. I want that add-on bundled. However, within this add-on is a UMD wrapper that includes require("../../lib/codemirror"). Browserify is seeing this and is bundling the CodeMirror from /node_modules/codemirror/lib/codemirror.js because of this (I think). I want this to use window.CodeMirror as defined in the codemirror shim instead, but cannot figure it out. Have tried many variations including the following:
"browserify-shim": {
"jquery": "global:jQuery",
"codemirror": "global:CodeMirror",
"../../lib/codemirror": "global:CodeMirror",
"codemirror/addon/hint/show-hint.js": {
"exports":null,
"depends":["../../lib/codemirror:CodeMirror"]
}
}
That require("../../lib/codemirror") will not go away! I'm sure I'm missing something.
I'm running this from a Gulp script, but I don't think that should make any difference. Browserify version 3.38.1. Browserify-shim version 3.7.0.
Any ideas?
If you add browserify-shim with {global: true}, it should be applied to your dependencies' dependencies (and so on) as well, which should hopefully do what you want.
Assuming you're using raw browserify in your Gulpfile, instead of:
b.transform('browserify-shim');
do:
b.transform({global: true}, 'browserify-shim');
If you're using gulp-browserify, I'm not sure whether there's any way to specify global transforms.
{global: true}
works for me... why is this not a default?