Disable babel plugin on CircleCI - node.js

I'd like to disable/not install one specific npm package in my app when CircleCI runs its tests, because the package makes the build process fail.
To be specific, it is a babel plugin for react-intl that automatically parses the files and pulls strings in another folder (babel-plugin-react-intl).
What is the best way of achieving this? Can this be done in the .babelrc file for example?

How you install and run tests locally should be the same as your CI setup.
If you need to disable a babel transform for tests - have them run as a different NODE_ENV and make sure your .babelrc only includes the plugin for the specific NODE_ENV
eg:
{
"env": {
"production": {
"plugins": ["react-intl"]
}
}
}
See: https://babeljs.io/docs/usage/babelrc/#env-option

Related

Build library files into build folder with yarn workspaces and typescript

I created a yarn workspace alongside typescript as such.
I have three folders with their own package.json
/api
/client
/lib
The point is to share code from lib between API and client. In an API file for example I can do
import {User, UserAccount} from '#myproject/lib'
There are problems with this.
I need to build lib each time I change something
/api's build files point to C:/myproject/lib/build/index.js
Since I would like to deploy the project to heroku by just pushing what's in /api/build, this will fail because it can't find the files in /lib/build. Maybe I can push both build folders up to heroku, but what I was hoping for was some magic that compiled all /lib/src files into /api/build. My /client is running in expo which I assume uses something like webpack or I don't know what, and it seems to do this. Do I need to use webpack to acheive this or can I do it with yarn workspaces and typescript?
In tsconfig.json of client and api packages you need two configs, if you don't already have them:
In "compilerOptions" make sure you have "composite": true
Add "references": [{ "path": "relativePathTo/lib" }]
When you run tsc, run it with the --build (-b) flag, like this: tsc -b. This will build the active package and any package in references. More on TypeScript Project References.
This fixes your problem in development. Depending on your project configuration, you may need to do more things to put it through the CI.

Best practice to publish src folder that contains esm modules

Consider this package.json:
{
"main": "./index.js",
"name": "#myorg/foo",
"scripts": {
"build": "babel src -d dist --delete-dir-on-start --source-maps inline --copy-files --no-copy-ignored",
"check-release": "npm run release --dry-run",
"postbuild": "cp package.json dist",
"release": "npm run build && cd dist && npm publish"
}
}
I'm trying to figure out what's the best practice in order to adjust it so it'll publish the src folder that contains ESM modules in a way that'll allow tree-shaking in the final app (CRA app).
Right now there are some issues with the above package.json:
npm publish won't behave as I'd like to - you need to use npm run release instead and that's not good as other tooling will rely on publish
To create the dist folder I'm using Babel but that doesn't feel right, is it better to use another tool instead to bundle it? My goal is the final app being able to use all imports easily (with no subpath exports, index, aliases, ...)
How would you adjust the above package.json to fullfill the above requirements?
Below are the two points answered!
npm publish won't behave as I'd like to... you need to use npm run release instead and that's not good as other tooling will rely on publish.
If you look below, you can see that Babel has been removed. Due to this, there is no need for your release script anymore.
You can just run the publish command when it is ready.
$ npm publish --access=public
Remember, this only works if you did the below!
To create the dist folder I'm using Babel but that doesn't feel right, is it better to use another tool instead to bundle it? My goal is the final app being able to use all imports easily (with no subpath exports, index, aliases, ...).
You can follow a few steps to stop using Babel and use an alternative:
In your package.json, add the following key:
{
"type": "module"
}
With this, also change require() to import, and module.exports to export. For example:
// Before...
const foo = require("#myorg/foo");
module.exports = { func };
// After...
import foo from "#myorg/foo";
export { func };
Instead of importing and exporting everything from one file, you can do that in a simpler way in package.json. You need to just add something like below:
{
"exports": {
".": "./dist/index.js",
"./feature": "./dist/feature.js",
}
}
For more information, see the documentation.
When someone downloads your module, they will import like this (like Firebase):
import index from "#myorg/foo"; // index.js
import features from "#myorg/foo/features"; // features.js
Not sure if these fully answered your question, but they might give you a starting point!

How to prevent babel-jest from using babel config file in project?

enter image description here
I wrote a package with babel-jest to transform specified js files. I installed this package in my working project and tried to run unit test under the project. There's a .babelrc file in my project, so babel-jest would use the babel configuration file automatically, which is not what i want.
Note: babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. To avoid this behavior, you can explicitly reset the transform configuration option:
// package.json
{
"jest": {
"transform": {}
}
}
I tried to reset jest transform in package.json file of the project, according to the description in jest docs. But it seemed not working, babel-jest still used the babel configuration file of the project.
Is there any way to avoid using .babelrc in project while running jest?

How do I setup Babel 6 with Node JS to use ES6 in my Server Side code?

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

JSLint, disable rules globally

If I've install JSLint through NPM globally, is there a way to disable certain rules either within the current scope of my application or globally on my system?
The main issue is the dangling underscore problem. I mean, the main place this comes up is in node.js when i use __dirname, but I am sure it will come up for underscorejs as well. I've ignored it with a jslint directive, but I think it is a little annoying to need to do that on every file I use underscore.
For that matter do I need to place 'use strict'; at the top of every single file?
Consider using a build tool for lint configuration and automation. When your project grows, you will need one anyway.
For node.js projects, I recommend using grunt. Install grunt into your project:
npm install grunt
Grunt has a built-in task for lint (https://github.com/cowboy/grunt/blob/master/docs/task_lint.md).
Now create a grunt.js file and configure linting there:
module.exports = function(grunt) {
grunt.initConfig({
lint: {
all: [
'app.js',
'modules/*.js'
]
},
jshint: {
options: {
nomen: false
}
}
});
grunt.registerTask('default', 'lint');
};
Note how you can add easily multiple files and file patterns and apply options globally to all of these.
Now you can just run grunt by invoking:
grunt
Note that if you use jshint, nomen is off by default (http://www.jshint.com/options/).

Resources