एनपीएम से स्टाइलशीट्स और जावास्क्रिप्ट्स को कैसे शामिल करें

यह इतना बुनियादी लगता है कि कोई भी इसे समझाने के लिए परेशान नहीं है। मैं अपने ऐप में पूर्ण कैलकुलेटर लाइब्रेरी का उपयोग करने की कोशिश कर रहा हूं।एनपीएम से स्टाइलशीट्स और जावास्क्रिप्ट्स को कैसे शामिल करें

एक वेब पेज पर एक कैलेंडर एम्बेड करने में पहला कदम सही जावास्क्रिप्ट और सीएसएस फ़ाइलों है: बेसिक उपयोग के नीचे अपनी दस्तावेज़ीकरण में, मैं यह मिल गया। सुनिश्चित करें कि आप, FullCalendar स्टाइलशीट, साथ ही FullCalendar, jQuery, और पल JavaScript फ़ाइलों को शामिल कर रहे हैं में अपने पृष्ठ के:
<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> 

और डाउनलोड के तहत, यह कहना है कि यह:

आप NPM के माध्यम से FullCalendar स्थापित कर सकते हैं:

$ npm install fullcalendar

जो मुझे समझ में नहीं आता है, मुझे fullcalendar.css, jquery.min.js, moment.min.js और fullcalendar.js फ़ाइलों को शामिल करने के लिए कहां मिल सकता है? एनपीएम इंस्टॉल मेरे डाउनलोड फ़ोल्डर्स में एक फ़ोल्डर डाउनलोड नहीं करता है जिसे मैं अपने प्रोजेक्ट में खींच सकता हूं, यह फाइलों को मेरे नोड_मोड्यूल फ़ोल्डर में जोड़ता है, और मुझे संदेह है कि मुझे फ़ाइलों के लिए वहां rummaging जाना है (मेरे node_modules फ़ोल्डर में हजारों हैं इसमें फ़ोल्डर्स)। मैंने जेएस फाइलों को बंडल करने के लिए वेबपैक का उपयोग करने की कोशिश की, सोचते हुए कि यह स्वचालित रूप से उन्हें बंडल में शामिल कर सकता है, लेकिन यह काम नहीं करता है। मैं क्या खो रहा हूँ?

स्रोत

2016-12-06 Wylliam Judd

लोग इस प्रश्न को कम क्यों कर रहे हैं? अगर उत्तर स्पष्ट है, तो सिर्फ जवाब क्यों न दें? –

".. मुझे फाइलों के लिए वहां पर rummaging जाना चाहिए" ठीक है, यह वास्तव में आपको क्या करना है। –

ओह सच में? यह मेरे लिए आश्चर्यजनक है, लेकिन मुश्किल नहीं है। –

आप स्क्रिप्ट टैग या शीर्षक में स्टाइलशीट लिंक में से किसी के लिए अगर आप, webpack का उपयोग इस के साथ 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' 
     } 
    ] 
    } 
};

और तुम कोलाहल स्थापित NPM की जरूरत है। और यदि आप वेबपैक को भी अपनी सीएसएस फाइलों को संभालने के लिए चाहते हैं, तो आप शैली-लोडर और सीएसएस लोडर स्थापित कर सकते हैं। यहाँ मेरी package.json है:

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

और मैं सिर्फ मेरी जावास्क्रिप्ट फ़ाइल में संकुल में शामिल हैं::

import $ from 'jquery' 
import 'fullcalendar' 
import 'fullcalendar/dist/fullcalendar.css' 

$(document).ready(() => { 
    $('#calendar').fullCalendar() 
})

{ 
    "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" 
}

तब मेरे index.html फ़ाइल स्क्रिप्ट टैग की जरूरत नहीं है

मैं अभी भी सीएसएस फ़ाइल आयात करने के तरीके को साफ़ करने का एक तरीका ढूंढ रहा हूं, लेकिन कम से कम मेरे पास एक HTML फ़ाइल नहीं है जो इस तरह दिखती है:

<!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>

कृपया मुझे बताएं कि सीएसएस फ़ाइल को और अधिक साफ तरीके से कैसे शामिल किया जाए।

स्रोत

2016-12-06 01:14:07

एनपीएम से स्टाइलशीट्स और जावास्क्रिप्ट्स को कैसे शामिल करें

उत्तर

संबंधित मुद्दे