All geek questions in one place

How to enable stylesheets and javascripts from npm install

It is so fundamental that no one bothers to explain it. I am trying to use the fullcalendar library in my application. In my documentation in the "Basic Use" section, I found the following:

The first step in creating a calendar on a web page is the correct JavaScript and CSS files. Make sure you include the FullCalendar style sheet, as well as FullCalendar, jQuery, and Instant JavaScript files on the page:

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> <script src='lib/jquery.min.js'></script> <script src='lib/moment.min.js'></script> <script src='fullcalendar/fullcalendar.js'></script>

And in the "Download" section, he says the following:

You can install FullCalendar via NPM:

$ npm install fullcalendar

I don’t understand where to find the fullcalendar.css, jquery.min.js, moment.min.js and fullcalendar.js files to include? NPM install does not upload the folder to my download folders, which I can drag into my project, it adds files to my node_modules folder, and I doubt that I should rummage through the files there (my node_modules folder contains thousands of folders). I tried using webpack to link js files, believing that it might automatically include them in the kit, but that didn't work. What am I missing?

+5
source share
1 answer

You do not need to have any script tags or style sheets in the header if you are using webpack with this webpack.config.js:

 module.exports = { entry: "./calendar.js", output: { filename: "bundle.js" }, module: { loaders: [ { test: [/.js?$/], exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015'] } }, { test: /\.css$/, loader: 'style-loader!css-loader' } ] } };

And you need npm to install babel. And if you want webpack to process your css files for you, you can npm set the bootloader and css loader style. Here is my .json package:

 { "name": "full_calendar_demo", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "babel-core": "^6.18.2", "babel-loader": "^6.2.8", "babel-preset-es2015": "^6.18.0", "css-loader": "^0.26.1", "fullcalendar": "^3.1.0", "jquery": "^3.1.1", "moment": "^2.17.1", "style-loader": "^0.13.1", "webpack": "^1.13.3" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

Then my index.html file doesn't need script tags:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src='bundle.js'></script> </head> <body> <div id="calendar"></div> </body> </html>

And I just include packages in my javascript file:

 import $ from 'jquery' import 'fullcalendar' import 'fullcalendar/dist/fullcalendar.css' $(document).ready(() => { $('#calendar').fullCalendar() })

I'm still looking for a way to clear the import method of the css file, but at least I don't have the html file that looks like this:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel='stylesheet' href='node_modules/fullcalendar/dist/fullcalendar.css' /> <script src='node_modules/jquery/dist/jquery.min.js'></script> <script src='node_modules/moment/min/moment.min.js'></script> <script src='node_modules/fullcalendar/dist/fullcalendar.js'></script> <script src='entry.js'></script> </head> <body> <div id="calendar"></div> </body> </html>

Please let me know how to include the css file more cleanly.

+1
source

Source: https://habr.com/ru/post/1260844/

More articles:


All Articles