Using Cygwin on Windows 10 (64 bits)
Installed babel-cli, react and babel-preset-react on top of Node.js, which was installed via Windows Installer (since there is no support for Cygwin.) I installed those Node packages using yarn, in the global modules folder.
In the django-compressor documentation (https://django-compressor.readthedocs.io/en/latest/reactjs/) they say that a precompiler setting does the trick:
COMPRESS_PRECOMPILERS = (
('text/jsx', 'cat {infile} | babel > {outfile}'),
)
However, babel is not recognizing jsx (throwing errors when encountering virtual dom elements.) It's obvious because I am not passing the react preset to the command. But there is no way I can use that preset because I installed in the global module folder and now I am unable to make babel find and use it.
I need one of these possible solutions:
How can I make babel use a preset globally installed (how should I use babel --presets react in a way that works)?
How do I use a .babelrc file in a Django project?
If I were to install the preset locally (which I seem to dislike a lot) how do I make it live with my Django project without making mess out of my project directory structure?
Okay, I banged my head a few times and found a solution:
There is no way to make babel work with presets installed globally. It is mandatory to install them locally. All react, react-dom, babel-core, babel-loader, babel-preset-react (and perhaps babel-preset-es2015 if latest ECMA syntax is desired) must be installed locally.
There is no place to put a .babelrc file where the precompiler would use it. No use to have a babel section in package.json either. Instead, the precompiler setting should pass the presets in command line like:
COMPRESS_PRECOMPILERS = (
('text/jsx', 'cat {infile} | babel --presets react,es2015 > {outfile}'),
)
Just assume that the folder where manage.py lives is also the root for Nodejs packages. Not tested when deployed and running from a wsgi file but maybe the wsgi should also live next to manage.py.
Also, it looks like all these files and folders: node_modules, package.json and yarn.lock (if installing with yarn as I am,) must be included in version control.
EDITED:
I no loger think node_modules should go into version control.
Related
I've got quite some experience in (web) development (Java, ASP.NET and PHP amongst all), and fairly new to React and Node JS.
Although I did multiple tutorials and read multiple articles, I feel like I'm missing some point here and there. Currently I'm working on a React app which implements a nice HTML template I found.
One React tutorial I did used Webpack for building and deploying the app (local). This works nice, does the job of transpiling ES6 (.jsx) and SASS using babel. So far so good :)
My template has an image slider (Owl Carousel), so I installed the react-owl-carousel module.
This gave me quite some problems with jQuery (also installed as a module).
After several attempts to fix this I decided to move on to another slider module, React Awesome slider.
I used the module as the README.md explained. But upon building it (npm run build), I got an error that the .scss file within react-awesome-slider could not be transpiled. A message like "are you missing a loader".
So I installed sass, node-sass, sass-loader etc etc and configured these in my webpack.config.js.
I also noticed the react-awesome-slider module within node-modules contained a webpack.config.js.
Long story so far, sorry, now to the essence of this question.
In what way can the modules installed (like react-awesome-slider) be considered "black boxes"?
It doesn't feel logical that all the modules get build when building the main app. The "exclude: /node_modules/," config in webpack.config.js prevents this, not?
So why does the react-awesome-slider give an error about .scss transpiling? I had no .scss rule in my webpack config then.
Will all dependend modules automatically get installed when installing a new module? So when I run "npm i react-awesome-slider --save-dev", will its dependencies also be installed? Or is this not necessary? And do I need to update (webpack) configuration after installing a new module? Or is it really black box and "self-containing"?
Any help would greatly be appreciated!!! Maybe there is a good react-webpack sample app on Github or something like that?
That also confusing me for a really long time. Here are some answers to your question.
people publish packages to the NPM, so a module your project depends on
can be pre-builded or source code, it depends. I have checked react-awesome-slider, it's main field in package.json is dist/index.js, directly import it won't cause an issue because there are no SCSS files.If you follow the CSS module usage instruction you have import react-awesome-slider/src/styles and you will find src/styles.js file import ../styled.scss,so webpack will load it with SCSS loader which you have not configured, that's why an error occurred.
while you install modules, npm will go
through its dependency tree, install its dependencies, dependencies'
dependencies, until there's no more dependency module to install. before npm 3.0 the node_module folder is tree structure reflects the dependency tree, but it causes problems that many modules relay on the same dependency, npm will download and save too many same files, after version 3.0 it becomes flat(release note here, search flat keyword).
You don't need to update your webpack config after you install a dependency cause webpack build process will handle it with file dependency tree. You have installed a package and import it in your activation code, file there will be handle( with its package.json main field file as an entry), you have installed a package without using it or import it in a dead file(dead file means you cannot find it from webpack entry file), it will be ignored by webpack as it's dead code.
I have too many confuse until I read npm docs. Good luck to you.
Node modules are build to execute packages.When the are compiled they have proper configuration to handle extensions that are imported in it and when you import something like .scss in your main app then it does not know about that extension then your webpack need rules to include that extensions.
It does exclude node_modules as the are pre-converted pr pre build.
More over webpack is bit tough so developers create CRA Have look at it.
I am new to NodeJS and have decided to go the route of writing "vanilla Node" to stay close to core and reduce dependencies. As it is right now, I have Node v10.16.2 installed globally on my MacBook, and all I need is a folder with a file like index.js and can do most of what I need.
Although require('./some-app') works fine, I quickly see that being able to cherry pick from a module is desirable. But import {someobject, somevar, etc} from './some-app' doesn't natively work in Node.
Is there a very simple way to
transpile one-for-one all files I create from a src to a dist folder and
optionally, watch and update the dist folder while I make changes to a src file?
Node has experimental support for ES6 modules
https://nodejs.org/api/esm.html
You'll have to call node with the flag, i.e.
node --experimental-modules [blah blah]
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 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
I have a server.js file that I downloaded from someone's website. The first line is: var express=require('express');
When I try to run this server with "node server.js" I get the following error: "Cannot find module 'express'." The express module is installed in the default node install location:
C:\Users\myname\node_modules\express\
I'm able to successfully run express by executing "node express.js" from the express install location in node_modules. I also tried copying over the express folder and file into my c:\node-testing\ directory where my server.js file is located but I still get the error. Any idea what the problem might be and how to fix?
You can set the NODE_PATH environment variable to tell nodejs to search other paths for globally installed modules that are not in the project directory.
See http://nodejs.org/api/modules.html#modules_loading_from_the_global_folders for details.
On Unix installations there are some built-in default locations, but on Windows, it appears you have to set this environment variable manually to support a global location.
FYI, if you want require to load a module from the project directory, then you have to use
require("./filename");
with the ./ in front of it. That's why it didn't work when you copied it to the project directory. node makes a distinction between loading from the project directory vs. loading from the node_modules directory below and thus requires a different syntax to specify which one you want. Express.js is also not a stand-alone module because it depends on a bunch of other modules so you could not copy only it. I'd recommend using the NODE_PATH option or install express into your project directory (it will end up in a node_modules sub-directory).
Node.js will only search for modules in from the current (and parent) directories. Unlike npm, Node has no concept of "global" modules.
You need to run npm install to install your modules into the directory containing your code.