Export npm JS package as independent script - javascript

I'm using npm package manager for my project.
Dependency in my package.json file:
"dependencies": {
"litepicker": "^2.0.11"
},
litepicker (javascript library)
File structure:
- assets
-- js
--- main.js
- index.php
How do I move litepicker js file into assets/js/ folder using npm script?

1. You can use laravel-mix
if you don't use laravel framework
you still can use laravel-mix
Sitepoint - Use Laravel Mix for non Laravel Project
It's bit complex since u need to deal with other stuff. And there is another option too
2. Use CDN from unpkg or JSDelivr
unpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like
Example unpkg - https://newbedev.com/php-sweet-alert-in-js-laravel-8-code-example
Codepen Litepicker using JSDelivr
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

Related

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>).

Add canvasjs library that does not exist in bower to my project

I would like to use CanvasJS library in my project but it does not exist in bower packages, so I tried to install it from a local zip file that I downloaded from their website. After successful installation the bower.json file includes the library's version and local path
"canvasjs-1.9.8": "C:\\path\\to\\myfolder\\canvasjs-1.9.8.zip"
Then if I try to build the project using gulp (e.g gulp serve), the library is not automatically added in the of index.html, as it happens for all the other libraries.
Is it a problem that it was installed from a local file? Is there another way to add CanvasJS library to my project and to my index.html file which is automatically generated with gulp build?
Thank you.
You can use gulp-inject in order to automatically inject code inside your index for example. Here the link:
https://www.npmjs.com/package/gulp-inject
So you can manually download your library (please include the .js version not the .zip), put it inside your project and dynamically include it inside the index using that plugin, adding a new task inside your gulp serve/build process.
You can also think to provide support for the library in the bower repository. It will make it available through bower to you and to the other users too in the future, if they may need it.
If you want to create a bower package, please refer to the official documentation that is really well done:
https://bower.io/docs/creating-packages/
For the bower installation I followed the instructions of this answer, and I assumed that using the .zip file that I downloaded would work. Since it didn't, the solution was to unistall it, un-compress the zip file and install the local .js file of the library. Then gulp serve command included the library in the index.html.

Using CDN vs Installing library by NPM

I recently started using NPM, but I don't understand how the files in node_modules are added to my index.html.
Case 1: CDN
For example, if I want to use jQuery via CDN, it is so simple! I add the CDN link to a <script> tag on my index.html file and $ is immediately available.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('body').css('background','red');
});
</script>
</body>
</html>
Case 2: NPM
Now I'm trying to use node modules and npm rather than CDNs. I have done the following:
Created package.json by using npm init --yes
Installed the jQuery package with npm install jquery --save
Now, my project folder looks like this:
I have removed the script tag with the link to the jQuery CDN from index.html, but I don't understand how to add jQuery from node_modules?
I am doing this on a browser.
CDN
Use CDN if you are developing a website that will be accessible by public internet users.
CDN Benefits:
Will be cached on most browsers because it's used by a lot of other websites
Reduce the bandwidth
check for more benefits here
NPM
npm is a great tool to manage dependencies in your app using a module bundler.
Example:
assume using a webpack module bundler and jQuery is installed
import $ from 'jQuery'
...
var content = $('#id').html();
but the browser does not understand the import statement so you have to transpile the code with Webpack commands, the bundler will check all the used dependencies and bind them in a single file without any dependencies problems.
Useful links: Getting started with webpack
in addition to above, npm install packages to local also:
let your local IDE provide code intellisense and type-checking;
provide source code for (Webpack) bundling, which combines all the JavaScript files to be a (minified) single file, so no dependencies.
I might have misunderstood your question... But can't you just add this line to your index.html file?
<script src="node_modules/jquery/dist/jquery.min.js"></script>
I think you want to host jQuery yourself and use it within a web app running in the browser.
If so, you need to host this file - make it downloadable via the same web server you are using to host index.html.
If you are using Express, you might do something like this on the server side:
app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));
And then reference the file in index.html:
<script src="/jquery/jquery.js"></script>
See Express' manual for serving static files.
If you're not using Express, you need to consult your web server's stack manual. No way to guess unfortunately - I gave an Express.js example because this is probably the single most popular package like that for node.js.
It won't be "filed" unless you link the js file in your template (replacing the CDN one). A bundler output or your compiled and public js file needs to be linked instead of the CDN link URI.

html5 boilerplate: how to add third-party js?

I am not a web developer, and though I believe this question must have a simple answer, I couldn't find it in the documentation, nor online.
I'll use html5 boilerplate to create a very simple app.
I would like to run
npm install an-arbitrary-js-library --save
gulp build
and be able to
import a_random_function from 'an-arbitrary-js-library'
in my js/main.js file.
How can I adapt my HTML5 Boilerplate to add third-party JS libraries to my project automatically?
Just put a script tag with the source referring to your library in the index.html file.
I don't know how you orginzed the project but you can copy the file of your third library from node_module to the project js/vendor or any other folders using gulp see from line 69 --> 95 here, this is the way they set jQuery in the project.

install laravel-echo and pusher-js as a simple js file without using npm

To Receiving Broadcasts notifications in laravel 5.3, I needed to include laravel-echo and pusher-js files into my blade templates.
I know that it is possible via npm package manager as has been explained in official laravel docs like this :
npm install --save laravel-echo pusher-js
And then in resouces/assets/js/app.js file import it like this :
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'your-pusher-key-here'
});
But I have a simple js file that all my scripts are Inside it and I did not use npm in my project and all my javascript files are as .js.
I went to laravel-echo github page But I did not find any js formatted file that I can use in my pages.
Is there any way other than npm to include laravel-echo?
Update:
I found that above codes are based on Typescript.I'm not familiar with Typescript. only I know that it can compile to pure javascript files. I am looking for laravel-echo as a js file that I could include it to my page and use included functions and methods. is it posibble?
I don't know if it's actually possible, but I had the same question as you. I was wirthing my .js files into the public folder. When I tried to add echo, everything went wrong. So, this is my solution, but you will still need to use npm.
I took my .js file and move it to resources\assets\js
Open resources\assets\js\app.js and add require(./filename.js);
run npm install
run npm run dev
Change the link to the new app.js file into my layout.
That way I managed to keep one js file into my code and use laravel-echo.
Maybe there is another solution, but I did not tried it.
Start a new laravel project
run npm install
Modify webpack.mix.js the following way:
mix.js('resources/assets/js/app.js', 'public/js').extract(['echo']);
copy the public/js/vendor.js file to your actual project.
Theorically, this is all the script echo need to be functional. At this point, I think you will need to modify/delete some lines to make it work without the webpack initialisation.

Categories

Resources