Develop Reference

Using local modules with Webpack 4 is bundling the same dependency multiple times

I am attempting to find a good way to use local modules in npm, or a way of structuring a large application so it can be bundled off into modules which may or may not be in a separate repository.
Each local module has it's own package.json and dependencies which are installed.
My requirements are that the modules are written in ES6 and only compiled as part of the main project being built (so I don't have lots of dependencies being indiependently built constantly).
Project structure
/root
/main-module
... main js files <- entry point
webpack.config.js
package.json
/module-1
... module 1 js files
package.json
/module-2
... module 2 js files
package.json
/module-3
... module 3 js files
package.json
I'm currently investigating using local modules via specifying a local file in my package.json like so:
...
"dependencies": {
"lodash": "^4.17.10",
"module-1": "../module-1",
"module-2": "../module-2",
"module-3": "../module-3",
"normalize.css": "^8.0.0"
}
...
You can see the whole project here: https://github.com/SamStonehouse/webpack-local-modules-test
I'm using webpack with the babel-loader which doesn't need any extra setup in order to use this form and even watches the module file for changes and rebuilds when they're complete which is amazing.
Issue: once this has built lodash is included in the built bundle 4 times over, one for each module which requires it, even though they all require the same version and all the sources are compiled at the same time.
I've tried using the splitChunkPlugin but to no avail
I've tried setting lodash as a devDependency in the local modules (this was something I didn't want to do but it didn't work anyway)
Does anyone have a solution for this?
Or an alternative way of bundling local modules in a similar fashion

Change each of the modules to have lodash as a peer dependency instead of a direct dependency. So in the package.json file, change this:
"dependencies": {
"lodash": "^4.17.5"
}
To:
"peerDependencies": {
"lodash": "^4.17.5"
}

ASP.net core install knockout issue

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.

Releasing javascript library... how should I handle the external dependencies?

I'm releasing a javascript library.
My library depends on other libraries.
Some of those libraries are available through npm, some through bower.
How can I release the compiled version of my library? Should I contain the compressed dependencies' code as well? To achieve that, should I use something like grunt?

you can distribute it through bower as in bower.json you already describe the dependency if your library meant for Client side script
From http://bower.io/
{
"name": "my-project",
"version": "1.0.0",
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<name>": "<version>",
"<name>": "<folder>",
"<name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Other wise if it is Server side for Node then only npm should do the work

Popcorn was not injected in your file

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.

Add a javascript library to angular-brunch-seed

I clone angular-bunch-seed on my computer
https://github.com/scotch/angular-brunch-seed
And I want to add breezejs to my project
http://learn.breezejs.com/
I copied the breeze libraries into my vendor folder /vendor/breeze/
And then I changed the config.coffee file as follow:
exports.config =
# See docs at http://brunch.readthedocs.org/en/latest/config.html.
conventions:
ignored: /(^vendor\/.*\.less$)|(^|\/)node_modules\/|(^|\/)_/
assets: /^app\/assets\//
modules:
definition: false
wrapper: false
paths:
public: '_public'
files:
javascripts:
joinTo:
'js/app.js': /^app/
'js/vendor.js': /^vendor/
'test/scenarios.js': /^test(\/|\\)e2e/
order:
before: [
'vendor/console-polyfill/index.js'
'vendor/jquery/jquery.js'
'vendor/breeze/breeze.debug.js'
'vendor/breeze/q.js'
'vendor/angular/angular.js'
'vendor/angular-resource/angular-resource.js'
'vendor/angular-cookies/angular-cookies.js'
'vendor/angular-sanitize/angular-sanitize.js'
'vendor/bootstrap/docs/assets/js/bootstrap.js'
]
stylesheets:
joinTo:
'css/app.css': /^(app|vendor)/
order:
before: [
'app/styles/app.less'
]
templates:
joinTo:
'js/dontUseMe' : /^app/ # dirty hack for Jade compiling.
plugins:
jade:
pretty: yes # Adds pretty-indentation whitespaces to output (false by default)
jade_angular:
modules_folder: 'partials'
locals: {}
bower:
extend:
"bootstrap" : 'vendor/bootstrap/docs/assets/js/bootstrap.js'
"angular-mocks": []
"styles": []
asserts:
"img" : /bootstrap(\\|\/)img/
"font": /font-awesome(\\|\/)font/
# Enable or disable minifying of result js / css files.
# minify: true
And when i execute brunch build, check the vendor.js file.. no breeze library included!
What am i missing?
PS: When I remove angular.js from the build file, it's properly removed.

Well, the answer has easy and complex subparts.
The easy part: why it does not work.
angular-brunch-seed makes use of the bower-brunch package, which internally checks for component.json files in the vendor libraries.
That means that if you did not download the library using bower, or place the required component.json at the library's root (and a mention in the root component.json), it will not be recognized as a proper vendor library and get ignored in the config.coffee's joinTo regular expression.
The order part of this config.coffee file only manages the order of placement of your libraries in the generated vendor.js file; if that library gets ignored beforehand, the order line has no influence.
Tricky part: get breeze into your vendor libraries.
The clean way should be to download it using bower. Thing is, there is as of today no bower package for breeze, as you might have guessed.
[victor#M]<~> bower search breeze
No results
[victor#M]<~> bower search | \grep breeze
No results
That means that you'll have to create it yourself. As explained in the bower docs, you'll have to package the bower final library files (not the sources) and a component.json in a git endpoint (github for instance) under some name (say, bower-breeze) and register it to bower using bower register. Take a look at what angular guys did, for inspiration.
You will also have to include semver tags in that repository to match the versions of the base library.
Alternatively, you could open an issue on breeze's github and ask for a component.json to be included in their repository (or better yet, write it and file a pull request).
Last measure, you may try to just write the component.json in your vendor directory and check if it still gets ignored, but I did not test that. Could work (but it's a hack) Maybe you would have to at least add a mention of it in angular-brunch-seed's root component.json too (with version info)
To sum up, angular-brunch-seed is a tricky beast...

I followed your recommendations and sent a pull request to the Breeze team.
After the pull request has been accepted, I will had the repo to bower if not done by them already.
for now I created a component.json file into my ./vendor/breeze folder
{
"name": "breeze",
"version": "1.2.9",
"main": "./breeze.debug.js",
"dependencies": {},
"gitHead": "0b0891a13d0023bbfdf91785bd99ac5a416bf9c7",
"_id": "BreezeS#1.2.9",
"readme": "ERROR: No README.md file found!",
"description": "ERROR: No README.md file found!",
"repository": {
"type": "git",
"url": "git://github.com/IdeaBlade/Breeze.git"
}
}
the gitHead is random.. but whatever, when I run brunch build, I can finally see breeze included into vendor.js !
Thx a lot