How to publish a client-side script using npm? - javascript

My nodejs package contains code for execution both on the backend, and a single .js file for execution on browsers. To make use of the browser script, it has to be put into a script element in an HTML file, obviously. My question is if there's a standard practice/convention with respect to how that browser .js file should be exposed to npm (or webpack or whatever) in a way that is independent of webpack, gulp, grunt, or other packaging tools. For example, by placing it into a scripts/ dir somewhere, or by including a simplistic nodejs/expressjs 3-line middleware that, when accessed via http://example.com/scripts/myscript.js, will send my script's content to browsers.
I've found this article, but that merely explains the trivial details of how to use a script element in an HTML page, rather than how to make npm install a script in standardized asset folder for pickup by static serving routes, asset management tools, or similar.

If you are publishing your package on NPM, an alternative that could work in your situation could be by using https://unpkg.com/ CDN. All packages that are published on NPM are available via this CDN.
Then in your frontend code you could simply reference that single js file you need.
<script src="https://unpkg.com/yourpackage/path/to/your/file.js"></script>

CDN is your best bet if you are not packing the web content in the same package. If your web contents are in the same package you could use
"scripts": {
"prepublish": "cp <source_path_of_file.js> <destination_dir>"
}
in package.json to pack it as a part of your npm package.

Related

How to include script located in node_modules folder using codeigniter 4?

I need to install this plugin on my application, so I followed the instruction and executed:
npm install --save #ckeditor/ckeditor5-upload
Usually, to load a plugin I create a file inside the load directory which contains the plugin name, in particular:
Views
load
ckeditor.php
which contains this:
<!-- Push section js -->
<?= $this->section('js') ?>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/translations/it.js"></script>
<?= $this->endSection() ?>
so to include in a specific section of my app, I simply do:
<?= $this->include('App\Views\Backend\load\ckeditor') ?>
and this will inject the plugin into my app, but how can I do this with local dependencies installed via npm?
It looks like you want to use NPM modules client-side, which you actually can do. Check out Browserify: https://browserify.org/
It allows you to bundle up all the dependencies of NPM modules into JS code that you can deliver to the client, allowing you to use those NPM modules as 'native' functions in your client-side Javascript.
NPM (node package manager) packages are used for applications that run on node.js. Since your app is using PHP on backend, it's not suited to import backend JS packages.
In general, you can't use a backend JS package on a frontend because it usually contains code that is not available in the browser JS (such as accessing local files).
You'll need to find some other package that does a similar thing but for combination of PHP and browser JS.
Note: Configuring your HTTP server (usually Apache or Nginx) to publish the node_modules and link the (public URL of) NPM package from the frontend is a bad practice. Plus this particular package won't work anyway because it's using features that are not available in the browser JS.
In order to use CKEditor in your PHP application, The simplest way is to use CKEditor online builder tool and download complied version of the CKEditor code, and place it in your PHP application.
Visit: CKEditor online build
Follow the below steps:
Visit the above link of the CKEditor Online Build Tool.
Select Choose editor type as your desired editor.
Select the desired plugin that you want in your editor.
In the next section drag/drop and customize your editor layout.
At last select language and download the zip file.
Extract it and place it in your application's public folder eg.
public/ckeditor5.
Now navigate to the downloaded folder and open the index.html under
sample folder (public/ckeditor5/sample/index.html)
Copy last both scripts and place them in your working file where you
want to use CKEditor. Don't forget to modify the relative path of
your ../build/ckeditor.js file.

NPM Jquery Client vs Server Side

I am fairly new to node and npm so this is a theoretical question.
I want so start using Jquery on my websites, so I did npm install jquery and this created a node_modules directory inside my webpage directory along with my html, js and css files.
In order to make it work I had to add the following in my head tag in html <script src="node_modules/jquery/dist/jquery.js"></script>
Question 1) Why npm installed node_modules directly into my directory? I would assume it would install it in my global directory usr/local/lib/node_modules
Question 2) If I would host the website somewhere else this would not work correct? I assume this method only works on client side.
Question 3) How would I have to setup my html or js in order to import jquery?
Apologies if this is a stupid question, but I'm trying to understand the mechanics of what I program.
Why npm installed node_modules directly into my directory? I would assume it would install it in my global directory usr/local/lib/node_modules
npm is designed to manage dependencies for a project. While you can make it install modules globally, this is really only intended for whole applications that are distributed via NPM.
If I would host the website somewhere else this would not work correct? I assume this method only works on client side.
The src attribute needs to be a URL that resolves to the script file. If you don't upload the script to the right place then it won't resolve.
How would I have to setup my html or js in order to import jquery?
With a <script> element.
Note that npm is not very good at managing dependencies for a client-side JavaScript project by itself. It only becomes useful when combined with a module system and a bundler such as browserify.

NPM package install into public directory (best practice)

Currently I am working on a website project. Its file structure looks like below:
source_code
- application
- node_modules
- system
- www
-- js
-- css
-- img
-- third-party
-- index.php
- package.json
This time I would like to ensure third-party libraries with NPM.
What is the best practice if some package should be available in public way and I want to avoid the manual copy-paste flow.
(Example packages: jquery, lazysize, bootstrap)
It depends on how you're setting things up to be used. If you're using webpack, for example, you would probably handle your JavaScript dependencies in package.json, and let webpack collect all these into a dist/bundle.js file which is the actual JS file included in your index.html.
If you don't have a packaging step like this set up, you can do one of these methods:
Link out to a CDN in your index.html (<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>)
Download this file in www/js/lib/ and include it locally within the site (<script src="/js/lib/jquery-3.2.1.slim.min.js"></script>).

Do I need to keep a copy of js library in lib or vendor folder though already installed using npm?

Question 1 :
I am installing my project dependency libraries using npm and it gets stored in the npm_modules folder. Is it necessary to keep the copy of library like angular.js,angular-route.js in lib folder or vendor folder? I could see few people are using lib folder or vendor folders to store the library in the permanent manner. I am confused by seeing this.
Question 2:
Do I need to copy/paste the node_modules folder to production or just run the npm install command on the project folder's command prompt to install all the dependencies in production. How does a dependency library get promoted to production?
Thank you kindly for your advice.
It all depends on how you need to deploy your site to production, really. Ultimately, you will probably want to bundle all your JS files into one or a few files, which are minified and sent with gzip compression.
How you bundle them is up to you. There are quite a few options:
Browserify
Webpack
Grunt / gulp build process
And many more besides
As to whether you need to keep a copy of these bundled javascript files under version control, well I think that boils down to 1 key question: can you run a build process (such as one of the tools using NodeJS) on the production server, or on a build server that creates a zip file or installer? If so, then you don't need to include them, just get the build server or production server to check out the latest copy from version control, npm install and then run the build process.
But if the best you could do is have the production server check files out from source control, then you would want to include the final versions of the files to use in the repository.
Keeping generated files, such as your bundled javascript files, in your source control repo should be avoided where possible. Because otherwise, every commit has to contain the changes to the source files, and the corresponding change to the generated files as well. And the latter is just noise, and has to be ignored by every developer looking at a diff/patch for a commit.

Web Worker - How to reference worker file when packaged with Bower

I'm writing a small javascript text expansion library. The library use a web worker and is packaged up with bower. When installed via bower the parser script is not found (I get a 404) because the browser is looking relative to the root of the consuming site and not relative to the bower script from which it is being consumed (both scripts are contained in the same folder). This appears to be the correct behavior.
My question: how should workers be used in combination with bower such that required scripts can be loaded without hard-coding the bower_components/ path?
function Expander(args) {
...
this.parser = 'parser.js';
this.worker = new Worker(this.parser);
...
}
I would use Grunt. Gulp might be a bit easier starting out since it can be debugged but it is missing a key component for your needs. There are a set of libraries wiredep, build-file and watch that will enable you to do what you are wanting to do. Wiredep watches the bower directory and will automatically add the js files for the dependencies in bower.json into the html and watch can be configured to watch any type of file in any directory for a change. Build-file enables you to configure a template and pass it variables that it will use to dynamically build a js file. You can then use the abilities of grunt to get the correct application path and point it to your file.

Categories

Resources