Develop Reference

.babelrc Babel configuration in a Next.js app

I'm getting my hands dirty with Babel for the 1st time to convert Jest tests from ES6 syntax to commonJS; this will likely involve using the #babel/plugin-transform-modules-commonjs babel plugin which I'm trying to install in my Next.js project. Looking at this part of Babel's configuration docs, I see the term package pop up a lot.
Are package hierarchies a Babel convention, Node-defined feature, or part of base JavaScript itself? What exactly defines a package in this context, and where is there documentation for them? Is babel-jest a stable alternative to this problem?

Babel uses a package.json file to resolve module dependencies. A package is a collection of files which can be imported using the require() function. You can read more about packages in the Node.js documentation on packages.
There is no standard way to define a package hierarchy, but Babel does have some conventions for how to organize your files. You can read more about that in the Babel documentation on organizing your code. Babel-jest is a stable alternative to converting Jest tests from ES6 syntax to commonJS. It provides support for using babel-plugin-transform-modules-commonjs to convert your modules to CommonJS.
Specifically, in the context of the Babel documentation you mentioned, the word "package" refers to your application itself (which is also considered a package) as well as other applications contained within the same repository (in case you have a monorepo containing many applications).

What does babel do in react native?

I'm trying to figure out the build process for react native and what exactly it is that both the metro bundler and babeljs do. In particular what allows me to use ES5+ syntax. I'm finding some sources that seem to tell me something different. This source says:
Metro combines all javascript code into a single file and translates
any Javascript code that device wont understand ( like JSX or some
newer javascript syntax )
This one says:
React Native uses Babel to convert React syntax and the newer ES5+
syntax into code that can be run in a JavaScript environment that
doesn’t support those features.
So now i'm confused what exactly both do. Also i've found this in the above source (and metro documentation):
Metro. The transformation process is described as:
All modules go through a transformer. A transformer is responsible for
converting a module to a format that is understandable by the target
platform (eg. React Native). Transformation of modules happens in
parallel based on the amount of cores that you have.
This sounds exactly like the transpilation that babel is supposed to be doing to me, or is this something different? Appart from that i'm confused what the resolution part of the bundling process works and how exactly it works in parralel to the other steps, but maybe that's a topic for another question.

There is a lot of confusion about how everything works together (React-Native, Typescript, Metro, Babel with presets). I will try to describe it.
React-Native is based on ReactJS (UI Framework for developing Web-Apps) which coding language is JavaScript.
JavaScript has some downside and therefore there is the possibility to take advantage of TypeScript. TypesScript is configured by a tsconfig.json file. There you can configure which files need to be transpiled to JavaScript and which should not. If you start e.g. yarn build:ts and have a configured output directory like /dist you will find the transpiled JavaScript code in that directory.
Metro is a JavaScript bundler. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies and is started by e.g. yarn start and configured by metro.config.js
Metro has three different stages:
Resolution:
Metro needs to build a graph of all the modules that are required from the entry point. To find which file is required from another file Metro uses a resolver. In reality this stage happens in parallel with the transformation stage.
Transformation:
All modules go through a transformer. A transformer is responsible for converting (transpiling) a module to a format that is understandable by the target platform (eg. React Native). Transformation of modules happens in parallel based on the amount of cores that you have.
Serialization:
As soon as all the modules have been transformed they will be serialized. A serializer combines the modules to generate one or multiple bundles. A bundle is literally a bundle of modules combined into a single JavaScript file.
So, as far as I understand Metro is using Babel in its transformation step. I think that this piece of information is missing in a lot of documentation and explanations. There is no information on that point! Therefore, Babel uses Plugins which tell Babel what to transpile and how to transpile JavaScript Code (e.g. JSX Syntax) from one format to another one.
As you can see in the babel.config.js file, the name of the preset is: metro-react-native-babel-preset, which indicates the usage of babel by the metro transformation process.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};

How to use production build of react/react-dom/etc on the server with webpack and ES6?

The official docs for React describe how to generate a production build with webpack using UglifyJS plugin and how to validate that one really is using the production build in a browser. However, I'm using NodeJS 7.x (and hopefully will switch to 8.x soon) and I'm using Babel preset-env, because I don't want to compile ES6 features supported already by NodeJS (e.g. async/await) to ES5. Thus, I can't use UglifyJS plugin, because it doesn't work with ES6 code yet. I tried switching to Babili, but its default preset does some unsafe transformations (see https://github.com/babel/babili/issues/570) that cause my code to break. I can modify the preset to use only safe transformation, but the thing is that I'm not really interested in minifying the code, as it will be executed only on the server; I'm only interested in removing dead code that might eventually slow down the server.
So what's better? Is it better to use a minifier like Babili and configure it to only remove dead code using safe transformations, or maybe it's better to use Webpack Resolve#alias to load production build of React from dist folder?

Coding standards for Angular2/TypeScript

I'm wondering if there's at least some community consensus on how to write reusable Angular2 code in TypeScript. I tried to summarise what I found out and what I'd like to know in context of Angular2.
Module/App directory structure and file names
In the official tutorial I see they put all code into app directory and all dependencies like node_modules or typings are in the parent directory.
Lowercase file names, .component.ts suffix for components and .service.ts for services. They put all files to the same directory which is going to be a huge mess?
One class/interface/enum per file. For classes, functions, interfaces and other names its probably best to stick to Coding guidelines for TypeScript by Microsoft?
Modules
Should modules compile and bundle themselves using postinstall npm hook? Or is it better to provide bundled version directly on git like most JavaScript libraries do?
Should I stick to system type of modules by default when I'm expecting that my module's going to be used only by browser or is it better to always use UMD?
Is there any reason to use CommonJS or AMD instead of system?
Using 3rd party modules
Should I expect that other developers will embed my modules with <script> tags or they'll load it using System.import()?
If my modules has dependencies on other JavaScript libraries, is it better to provide a bundled version of my whole module with all dependencies or just define them in package.json?

There's the Angular 2 Style Guide (https://github.com/mgechev/angular2-style-guide), as featured in Angular2 News:
The purpose of the following style guide is to present a set of best practices and style guidelines for the development of Angular 2 applications. If you are looking for an opinionated style guide for syntax, conventions...

Angular 1 had a community accepted style guide written by John Papa. There will be something similar created for Angular 2 in fact you can see the start of this coming together with the Tour of Heroes examples in place at angular.io

How to minify AngularAMD code?

I've been looking at the AngularAMD library and I'm wondering if there's a way to minify the code for use in production.
I've taken a look at the AngularAMD sample which does have a Grunt configuration, but unfortunately, the instructions for building aren't working for me, and it's giving an error on the grunt setup step. So I'm not able to see whether this project is producing the sort of minimized code that I'm looking for.
When trying to use grunt-contrib-concat on the example AngularAMD code, the problems I run into are the same ones that you traditionally run into when trying to minimize Angular projects with RequireJS which led to Ravi Kiran's blog post on how to integrate the two.
(e.g. defining both app which creates the initial Angular module, and its controllers as RequireJS modules ends up with a circular dependency, so that you need to define the controllers as individual functions, list those functions as dependencies in the code which creates the Angular module, and then call angular.module(...).controller on each of them.)

The problem with angularAMD-sample project during grunt setup resulting in cryptic Fatal error: Arguments to path.join must be strings was actually caused by an older version of grunt-bower-task. Updating it to 0.4.0 from 0.3.2 resolved the problem.
grunt deploy should now produce the minified code with angularAMD.