I have a bower package containing 2 requirejs modules -
- src
- a.js <- this is the primary package/amd module which lists b.js as a module dependency
- b.js
So we end up with something like this:
// a.js
define(['./b'], function(b){})
The problem is that when I add this package as a dependency of a separate project, that the require.js configuration will only successfully resolve the path for module a.
What is the best solution for maintaining an bower package consisting of multiple rjs modules, without manually configuring the rjs packages key in the parent project?
I would like to get to the point where I can successfully auto build my rjs configurations from the bower.json, as seen with grunt bower and other npm build modules.
Part of me feels that this is bowers responsibility, as there should be an option to define a package as multiple files.
I also suspect there may be a way to concatenate the modules into a single file, but am a little unsure of how to do so.
I figured it out. The solution involves concatenating the said files to make one bower package.
// This will build all 3 files into a single concatenated pkg
// 'efficient-frontier', 'everestjs', 'sem-campaign'
// nmp install -g rjs
// r.js -o require.build.js optimize=none
// Below is a file in my root named 'require.build.js'
({
baseUrl: "",
paths: {
everestjs: './vendor/bower/everestjs/index',
requirejs: './vendor/bower/requirejs/require',
'jquery.cookie': './vendor/bower/jquery.cookie/jquery.cookie',
'sem-campaign': 'dist/shared/sem-campaign',
'efficient-frontier': 'dist/shared/efficient-frontier',
jquery: './vendor/bower/jquery/jquery'
},
// Exclude the packages you expect to be included in the parent project
exclude: ['jquery','jquery.cookie'],
name: "sem-campaign",
out: "./dist/sem-campaign.js"
})
The final package bower is 3 concatenated rjs modules. The package in this example is sem-campaign.
Related
When I use npm install, there are certain node packages that gets installed that contains nested node modules.
Like this:
-node_modules
-packageA
+js
-node_modules <--- needs to be removed/ignored
+jquery
-packageA-sub1
+js
-node_modules <--- needs to be removed/ignored
+jquery
Is there a way to specify which packages not to include a nested scoped node_module?
In my case, there are packages that are including jquery (packageA and packageA-sub1, sub2, sub3, sub4, etc), and it's messing up my website because I already include jquery in a few of my plugins. The only way to remedy this is by manually deleting the node_module folder inside the packageA folder.
I tried .npmignore but that doesn't seem to work:
packageA/node_modules/
packageA/node_modules
/packageA/node_modules
/packageA/node_modules/
I'm using npm 5.8
You can flatten the node_modules hierarchy, when modules share dependencies with the same version, using npm dedupe
The documentation describes npm dedupe as follows:
Searches the local package tree and attempts to simplify
the overall structure by moving dependencies further up the tree,
where they can be more effectively shared by multiple dependent
packages.
My project containing many ES6 files and all of these are containing at least one class.
__createClass,__interopRequireDefault and __classCallback polyfilling function are generated for each files.
I would concat them with browserify after that, and I guess it is too redundant to keep them for all of files.
I think I can inject polyfilling functions during bundling task.
When I use typescript, I can specify --noEmitHelpers options not to generate such codes during compiling task. Is there something way to do that with babel?
You can use babel-plugin-transform-runtime. It does exactly what you're looking for. Check out the docs.
This is where the transform-runtime plugin comes in: all of the helpers will reference the module babel-runtime to avoid duplication across your compiled output. The runtime will be compiled into your build.
$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime
.babelrc
{
"plugins": ["transform-runtime"]
}
I'm trying to figure out how to get webpack to watch an NPM linked dependency. I've tried to add an explicit entry pointing into the package, and I've tried to both explicitly included it and also not excluding /node_modules/ (which is quite common).
The scenario I want to achieve is as follows: I want to separate out parts of my react-based applications into component libraries (NPM packages).
Both the main package and the dependencies are written in ES6, so I've created a small gulp script that watches for changes in the dependent project, and transpiles its source (src/) to lib.
I've used npm link to wire in the dependent package so that I don't need to pack/publish/reinstall it every time I make a change.
When I make changes to the dependent package, the gulp tasks transpiles the code OK.
It is in the last part I am struggling; getting webpack watch to trigger a re-bundling when the dependency is refreshed by the forementioneds gulp task.
Make sure you transpiler script doesn't delete your old /lib dir, but overwrites files instead.
I had a similar problem with Webpack dev server not seeing changes because I was removing the /lib dir before every transpile.
When working with modules already registered on NPM, the process of including them is easy: run npm install <package> and then add var package = require('<package>')
However, I'm not sure of the way to "set things up" when working on my own module. I'm not ready to publish to NPM but I do want to require the module in the same way as outlined before.
Therefore, I've completed the following steps:
Created a sub-directory inside the node_moduels directory for my module
Added a package.json file (via npm init) inside this new directory
Included a dependencies section in the package.json file
Is this the correct approach to using node modules locally.
Also, when I run npm install the dependencies do not appear to be detected in my module's package.json file - I assume this is an issue with the way I've gone about things?
I would not suggest putting it in the node_modules directory. This folder should be excluded from your source control.
Here's a minimal end to end example.
Put this file wherever you like. I suggest a 'lib' folder within your directory structure
myModule.js
module.exports = function(callback){
return callback("hello there");
};
Then, wherever you want to use it:
app.js
var myModule = require('./lib/myModule');
myModule.sayHello(function(hello) {
console.log(hello);
});
Now, if you run node app.js your console output will be:
hello there
As your myModule grows, you can refactor this into a separate set of files, create an package.json for it, and publish it to NPM
EDIT
Based on your comment, it looks like this is what you want
Local dependency in package.json
So, based on that, along with our above example, edit your package.json as follows
{
"dependencies": {
"myModule": "file:../lib/myModule"
}
}
Then you can require as:
var myModule = require('myModule');
If / when you publish myModule to npm, you can just change your package.json
ANOTHER EDIT
As another alternative, you can specify git urls in your package.json without publishing to NPM
Use Git dependencies with npm and Node on Heroku
This would be as easy as doing the following:
In the root directory of your (unpublished) module execute npm link
In the root directory of your module requiring that unpublished module execute npm link UNPUBLISHED_MODULE_NAME.
voilĂ !
In the data-main require js file, we write like this:
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore'
}
What I did was manually download the row JS library files and make "lib" folder and move the file into the folder and change the file name if necessary.
I use Nodejs for server, and I am wondering if there's any tool to create these client-side Require path files automatically from the installed Node-Modules. Browserify does a similar job if I don't user Require (creating one JS file, and call it in the other browser JS files.) But it seems like Browserify cannot be used as a path in Require.
Any thoughts? Thanks.
An alternative solution (to browserify, with which I'm not familiar) is to use bower for managing client side libraries. It is similar to node/npm, but is geared towards browser libraries.
It will not copy or rename libraries, because that step isn't necessary. Instead the libraries will be placed in a directory called bower_components. The paths config would look like
paths: {
jquery: "../../bower_components/jquery/dist/jquery",
bootstrap: "../../bower_components/bootstrap/dist/js/bootstrap",
...
}
(the actual number of .. in the path depends on values of other requirejs options).
In development, when all dependencies are loaded asynchronously as separate files they will be loaded from bower_components and requirejs optimizer will find them there when generating the optimized single source.
Adding the dependency paths to the config file can be half-automated with grunt plugin grunt-bower-requirejs. The idea is that after a library is installed using bower install LIBRARY it's path can be added with grunt bower.