Developer Automation With NPX and Commander

The extra I find out about JavaScript building, the extra I’m uncovered to JavaScript construct and config gear. The gear similar to babel and webpack, frustrate me. The config gear, the magic instrument of pleasure that units up your whole construct gear for you by the use of magic pixie-dust or one thing so you’ll be able to simply write code, the ones fascinate me.

I want we had extra for WordPress and ones that did issues precisely the best way I believe they will have to be carried out. I in point of fact dislike the use of templating languages for templating code. That’s what’s stopped me from development my very own scaffolding gear earlier than. I at all times construct a plugin that did issues the best way I sought after my template to do issues, then copied the plugin into the templates listing of my generated after which manually added substitution strings. Debugging used to be a ache.

My new purpose is to stay a plugin that has a reference case for every factor I would need a plugin to do — composer.json, Gutenberg blocks, PHP direct injection container, and many others. — and a scaffolding device that may reproduction from that plugin.

I made up our minds to write down it in Node in order that I may simply proportion it by the use of npm, and have the ability to run it in the community, in a Docker container and even in a Serverless app. It used to be a excellent excuse to be told extra about Node’s document machine module and npx.

Getting Comfy With NPX

NPX is a device that allows you to run Node applications from anyplace with out putting in them first. It’s highest for software scaffolding gear that you just handiest once in a while use. As a substitute of protecting a replica put in in the community, you run the model on npm. For instance, to create a react app, you should set up create-react-app globally in your laptop, or you’ll be able to use NPX create-react-app to perform the similar factor and not concern about protecting it up-to-the-minute or consuming up space for storing.

When you’re now not accustomed to NPX, which is incorporated with npm, I like to recommend reading the introductory post about NPX.

Within the introductory put up, Kat displays the right way to execute JavaScript saved in a Github gist. As she notes, that is far off code execution, which is doubtlessly extremely unsafe. So the first step for working this script is, learn the supply of the code you’re about to execute, step two is come to a decision if you wish to execute it and step 3 is to reason far off code execution.

Let’s do this. First, cross to https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32 and have a look at the script. Closing time I regarded it simply led to a console message to be logged. Be sure it hasn’t modified. If this is the case it hasn’t:

View the code on Gist.

That can reason that message to log.

Operating the bundle with an area trail. So that is cool, we will be able to increase a script saved as a gist for our automation. However the revel in of creating goes to be dangerous. If we need to push and pull code from the gist, then check, that will probably be sluggish. I’d somewhat check the code in the community.

Sure, I may run the code at once with node, ie. transfer to the native listing and run node index.js or no matter. What I in point of fact need is to make use of the improvement model in context. What if I may use npx ~/npx-is-cool from anyplace on my laptop to make use of the native building model of npx-is-cool?

Seems npx can use an area document trail, in order that is conceivable. Let’s stroll via how it’ll display you some fundamentals of ways npx works.

First, obtain a replica of that gist. Put it on your major person listing and alter the identify of the listing to “npx-is-cool”. Then open up the index.js and you’ll see:

View the code on Gist.

This can be a lovely fundamental script, alternate it’s output to one thing extra amusing like “I’m the Batman” so you’ll be able to turn out your native model is getting used and since you’re the Batman.

View the code on Gist.

Now you’ll be able to run this command from anyplace in your laptop to make use of your individual npx-is-cool

View the code on Gist.

Now we’ve a fundamental fashion for creating the device. Increase the npx bundle in the community, the use of and debugging it in context. That ultimate section is vital, I’m creating a building device, I need to apply it to the gear I’m creating to look if it really works or now not and as soon as it does so I’ve its functions to be had to me in an instant when they paintings.

Sure, I additionally need to push my adjustments to far off model keep an eye on and make the bundle to be had by the use of npm. However, after I’m creating, I don’t need to take into accounts managing releases.

Input The Commander

Command that outputs simply “Hello Roy”

View the code on Gist.

Developer Automation With Commander

The usage of Node To Paintings With Native And Far flung Information

For one thing sensible, I created a command that copies the 2 information that copies the 2 PHP information I exploit to load resources for a React app in a WordPress plugin and alter there namespace.

To perform this we can want 4 issues:

1. A serve as to obtain a document from a far off URL to the native.
2. A serve as that makes use of the primary serve as after which adjustments the namespace within the ensuing document.
3. A serve as that calls the ones purposes will the fitting argument
4. A command to name that serve as.

Let’s cross during the listing. I don’t need to write a complete educational at the node document machine, however right here’s your crash route.

In Node, we use the filesystem — learn and write information for instance — the use of “fs”. For instance, to test if a document exists:

var fs = require('fs');
fs.existsSync(__dirname + '/hiRoy.txt' );

 

The fs module is lovely readable. This serve as is named “existsSync”. It tests — synchronously — if a document exists. We will be able to write a document with fs, synchronously the use of fs.writeSync().

When you’re now not used to require(). It brings the price of the module.exports from the document you specify into scope. For instance, when you have the document “foo.js” and inside of you will have module.exports = serve as foo(){}; Then while you use const foo = require( ‘./foo’ ); from a document in the similar listing that serve as is now in saved within the const foo. We will be able to go away off the document trail — require( ‘react’ ) — to get entry to a module within the node_modules listing, on this case, the export of node_modules/react/index.js

Here’s a module to deal with downloading a document by the use of https — the use of the https module — and writing it to document the use of the fs module:

View the code on Gist.

Understand that at the ultimate line — module.exports = obtain. The obtain is a connection with the serve as, so after we require this document, that serve as is usable. That’s how we use it in our subsequent module.

This is the module to obtain a document and alter its PHP namespace.

const obtain = require( './obtain' );
const update = require( 'replace-in-files' );
const trail = require( 'trail' );

/**
 * Obtain a document and alter its namespace
 *
 *
 * @param {string} document Far flung document to duplicate
 * @param {string } destPath Trail to write down document to
 * @param {string} nameSpace Namespace to make use of for brand spanking new document
 */
serve as downloadPhpAndNameSpace(document,destPath,nameSpace){
	obtain(document,destPath, () => {
		update({
			from: "/calderawpWordPressPlugin/g",
			to: nameSpace,
			information: [destPath]
		});
	});
}
module.exports = downloadPhpAndNameSpace;

When you’re nonetheless being used to required() have a look at the variation between the specified for obtain and for replace-in-files. The primary begins with a document trail ‘./’, so node seems for the document. The opposite does now not, so it seems in node_modules.

None of those purposes so paintings with the precise information we need to paintings with. They paintings with any information, which is excellent, those are not unusual wishes. However let’s get started fixing the issue handy. We wish to obtain two information and re-namespace them. With those two purposes, we simply want another to arrange the trails of the place the information cross.

Developing The Command

Now it’s time to wrap all of this up in a command so we will be able to kind npx caldera-former client-assets ~/my-plugin Seller/Package deal and get our scripts copied to ~/my-plugin with the namespace Seller/Package deal.

This can be a sub-command of our bundle. I really like this development vs having only one command with a whole lot of choices. It’s going to make it more uncomplicated so as to add further instructions and choices later.

View the code on Gist.

Within the command() serve as, that phrases in sq. brackets transform variables handed to the serve as “motion”. The serve as motion is certain to a easy callback that calls the serve as created within the ultimate step.

Now You Take Command

I’m taking part in studying extra in regards to the portions of JavaScript that I don’t typically get to paintings with because of handiest the use of JavaScript for front-end dev. Finding out how Node modules are structured helped me perceive extra about what webpack is abstracting. I additionally realized extra in regards to the document machine.

Extra importantly, I’ve been operating on my npx app that are supposed to save me and my crew time. When you assume a device like this is able to save your crew time, fork it and make your individual. At me on Twitter @josh412 or go away a remark with what you create.

The put up Developer Automation With NPX and Commander seemed first on Torque.

WordPress Agency

[ continue ]