Is there a way to write a single module/package that can be posted both to npm and Bower, without having to duplicate files?
Imagine you have a simple JS file with some code that is self-contained (i.e. it doesn't have any external dependencies).
An ideal directory would look something like:
/file.js
/package.json
/bower.json
The problem in this case is that "file.js" to work with npm would need a module.exports statement, whereas this would not work with Bower.
So, is there a way to avoid producing two separate almost identical files?
This seems the best option so far (inspired by the Angular team).
Create an index.js file in the project root, with this content:
module.exports = require('your-original-module.js');
Then, in package.json add this line:
"main": "index.js",
Simple, but effective!
If your module doesn't depend on other npm modules,
you can provide file (lets call it 'bowerify.js') with
window.MyUtility = require('./file');
to expose your utility as global variable.
And then use browserify to package your code for the browser:
src: 'bowerify.js',
dest: 'my_bower_module.js'
Now you can install my_bower_module.js with bower.
Related
I have a single file (either a .js or .node generated with C++, but works the same) that I can use in node.js by calling:
var addon = require("./addon");
It's not an official package or anything; it has no package.json (and I want to keep it that way).
This above code works fine if I run it in a simple node.js application, but how do I include it in a node.js library? For example:
exports.addon = require("./addon")
This doesn't seem to work, I tried changing the package.json:
"dependencies": {
"addon": "file:./addon.node",
}
but when I use
require("addon");
later it says it can't be found. [EDIT: after I run npm publish and then npm -i mymodule in another file]
Am I missing something?
Assuming you are writing your own library and want to include you add-on there, I would build a file structure like this:
index.js
addon/cpp-generated.js
addon/other.js
...
Then from index.js you can just do:
const cpp_generated = require('./addon/cpp-generated')
I've only used .js extensions. You need to change a configuration file to allow for new extensions (like the .node that you mention.)
There is no need to mention the file in your package.json for things to work. It may be needed there if you run a build, although it should get included because of the require() statement anyway.
So it looks like you're doing it right except maybe for the extension (your example shows .node.)
And to make sure it gets published, I would add it to the list of files:
"files": [
"index.js",
"addon/cpp-generated.js",
...
]
I am used to using NPM packages with Webpack, but I'm wondering how you're supposed to use NPM packages without Webpack.
I know how to install packages. I just don't know how to use them, since you can't just import modules in plain js.
Webpack compiles a bunch of javascript files and combines them into a single one for web distribution. NPM downloads javascript files through packages.
Here's some scenarios where you might use NPM without webpack
You are doing Node.js server-side javascript development. There's no webpack here
You are using a webpack alternative like rollup or browserify
You directly do anything else with the files npm downloads. Maybe you concatenate, throw them in a Makefile or maybe you expose node_modules directly to the world and reference their full paths directly.
Most of my web and server-side development is without webpack.
Why you can't import in plain js?
If you correctly define the package entry point like
"main": "dist/index.js",
"module": "dist/index.js",
Those files can be plain ES6 javascript with named exports or export default, and you can import them after intalling your package with regular import.
You don't need webpack nor babel to make an mpm module. Just put in any folder the files you want to distribute, specifying the main entry point and export elements on that file.
Now... in an angular or react application for example, they may install your component and will use babel and webpack to first transpile your component to ES5 with babel, and then bundle your code together with the rest of their app using webpack.
For front-end, not node.js but still NPM modules.
HTML can import directly ES6 modules but the file must be in .mjs format and provide export default, Module.exports in regular .js file wont't work. This is not a common thing and you'll run into problems if there are subdependencies that don't use ES6 modules. If you find a module that supports it. i.e. some-module
npm install some-module
And in the same directory next to node_modules create index.html pointing straight to the modular bundle
<h1>I'm HTML</h1>
<script type="module">
import SomeModule from './node_modules/some-module/bundle.mjs';
const mod = new SomeModule();
mod.doStuff();
</script>
Here's an article about this https://medium.com/passpill-project/files-with-mjs-extension-for-javascript-modules-ced195d7c84a
npm init
To create a package.json file
npm install --save <package>
To install a package and save it in the package.json file
I am working on a NodeJS (v. 8.12.0, EcmaScript 6) project, whose project structure is similar to:
project_root/
src/
utils/
protocol_messages/
helpers.js
tests/
unit/
utils/
protocol_messages/
helpers.js
I am writing tests using Mocha as a test framework.
Question
In the helpers.js under tests/unit/utils/protocol_messages/, what's the proper way of importing the module-under-test?
To elaborate:
I want to avoid the relative path in: require('../../../../../src/utils/protocol_messages/helpers').
It works, but it's ugly, and if the project structure changes, I would have to rewrite the test imports, as well.
(I am new to Javascript so I might be doing several things wrong.)
Update
Solutions provided in this question:
require.main.require: in a comment to this answer, "This solution will not work if code covered with unit tests like Mocha test".
Extracting my utils to a node module doesn't make sense for me, since the code is very application specific.
Having an extra node_modules under my src/ project root of a NodeJS project doesn't seem to make sense.
Using a Javascript transpiler when I am using only features available in NodeJS and writing CommonJS projects seems a bit of an overkill.
If I am mistaken on any of the above points, please point it out, as I am at a loss. It seems to me like NodeJS doesn't not provide a native way to import CommonJS modules with absolute paths.
You can use wavy npm package.
This module lets you turn things like require('../../../../foo') into something like
require('~/foo'). The way it works is that on postinstall it creates a symlink in app/node_modules/~ to point to app/
Assume you need a config.js file present at your project's root in a file which is present at /routes/api/users/profile.js, you do not want to import it as ../../../config.js
Create a directory structure in your project's root directory as described below:
/Modules
index.js
package.json
Modules/index.js
module.exports.config = require('../config.js')
Modules/package.js
{
"name": "modules",
"main": "index.js",
"version": "1.0.0",
"dependencies": {}
}
Now run
npm install ./Modules
/routes/api/users/profile.js
const { config } = require('modules')
This way autocomplete feature of your code editor will also work. No more global variables pollution, long relative imports, no dependency on environment variables and the best part is, it will work with pm2 and nodemon.
I have read several times the documentation provided at :
Node API Babel 6 Docs
I'm starting out learning pg-promise following the Learn by Example tutorial and would prefer to work with ES6 and transpile to ES5 with Babel but am unsure of a few things :
After installing babel-core, what preset do I use and where/how do I configure this to work?
The documentation was unclear to me about which file I put: require("babel-core").transform("code", options); into and what parts of that code are place holders. When I use that code, do I just use it one time somewhere and then I can use ES6 in every other file? How would this be achieved?
I read about this .babelrc file and would like to confirm if the actual filename is ".babelrc" or if that is just the file extension and where in relation to the root directory of my project do I put that file.. and how do I link to it?
If I'm using pg-promise should I be using ES6 and Babel or will running : npm install as described under the Testing section for pg-promise be enough and trying to use ES6 with this create more problems?
I was hoping to take advantage of let and const if the need came up during my server side development.
Is there a standard file structure for a node+babel+pg-promise server setup?
Edit
Worth noting that I have also read Node JS with Babel-Node and saw that using this should be avoided. The final answer at the very bottom didn't really make sense to me for similar reasons I'm having trouble following the actual documentation provided by Babel.
1.a What Preset is needed?
You will need to install Babel firstly with npm install babel-core --save-dev in the root directory of your project using a Terminal window like Command Prompt.
Once installed, you will need to install the es2015 preset with npm install babel-preset-es2015 --save-dev. Babel-Core is Promises/A+ Compliant but not ideal for usage due to poor error handling so a library such as Bluebird should be used instead for this purpose. In order to transpile, babel-core will still need to be installed and es2015 enables ES6->ES5 transpiling so you can use fancy things like let and const etc.
1.b Where to put require("babel-core");?
instead, use require("babel-core/register"); and place it inside your Entry file typically called, "server.js". The server.js file will need to use CommonJS (ES5) exclusively.
By using the "require" statement it will apply all relevant transforms to all code being required into the Entry file and all files being required/included into those files.
You point to the Entry file inside package.json under the "main": section.
Package.json is created when you initialise the project with npm init at the root directory of your project inside the Terminal Window
One approach to this would be :
Entry File - server.js
server.js - requires {babel-core and the main ES6 file : config.js/jsx/es6/es}
config.es6 - uses ES6 and has includes(requires) for all other project files that can also use ES6 as they get transpiled by being loaded into the "config" file which is being directly transpiled by babel-core.
2. What is .babelrc?
.babelrc is the filename and should be placed in the same folder as your package.json file (normally the root directory) and will automatically "load" when babel-core is required to determine which preset(s) or plugins are to be used.
Inside .babelrc , you will need to add the following code :
{
"presets": ["es2015"]
}
3. pg-promise Testing Section
A direct quote from the developer recently answered this
You do not need to worry about steps in the Tests, use only the steps in the install. The one in tests relates to the dev dependency installation, in order to run tests. The pg-promise can work with any promise library compliant with Promises/A+ spec.
4. Standard File/Folder Structure for Server Side Projects?
There is no standard way to achieve this task as each project has unique demands. A good starting point would be to place the Entry file in the project root directory, the ES6 Config file in a "scripts" or "src" sub-folder and individual components in folders below that.
e.g.
ROOT/server.js
ROOT/src/config.es6
ROOT/src/component1/files.es6
ROOT/src/component2/files.es6
With this in place, Babel will successfully transpile all ES6 to ES5 and enable support of A+ compliant promises.
To begin using the node.js webserver This Guide provides a bit more insight and in the context of this answer the code shown would be placed into the ES6 config.es6 file and the following code would go into the Entry server.js file :
require("babel-core/register");
require("./src/config.es6");
The process for building Isomorphic web applications is different to this and would likely use things like grunt, gulp, webpack, babel-loader etc another example of which can be Found Here.
This answer is the combination of several key points provided by other answers to this question as well as contributions from experienced developers and my own personal research and testing. Thank you to all who assisted in the production of this answer.
This answer uses this simple directory structure
project/server/src/index.js => your server file
project/server/dist/ => where babel will put your transpiled file
Install babel dependencies
npm install -g babel nodemon
npm install --save-dev babel-core babel-preset-es2015
Add these npm scripts to your package.json file
"scripts": {
"compile": "babel server/src --out-dir server/dist",
"server": "nodemon server/dist/index.js
}
Create a .babelrc file in your project root directory
{
"presets": "es2015"
}
Transpile your directory with
npm run compile
Run your server with
npm run server
I think you should use a tool like grunt or gulp to manage all your "build" tasks. It will automate it for you, and you won't make errors.
In one command, you can transpile your code into babel ES2015 et start your application.
I suggest you to take a look at this simple project. (just install node_modules and launch npm start to start the app.js file)
However, if you really want to use babel manually,
.babelrc is the name of the file, you can see one in this project (redux) to have an example
.babelrc is a config file, if you want to see how it works, you can check this package.json (always redux)
There's actually no standard way that I know. You can use the project skeleton below if needed, and send pull request to improve it :-)
#makeitsimple
Step: 1
npm install nodemon --save
In project directory
Step: 2
yarn add babel-cli
yarn add babel-preset-es2015
Step: 2
In package.json-> scipts change 'start' to the following
start: "nodemon src/server.js --exec babel-node --presets es2015"
Step: 3
yarn start
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à!