Cách bao gồm biểu định kiểu và javascripts từ npm install

Điều này cảm thấy cơ bản đến nỗi không ai phiền lòng giải thích nó. Tôi đang cố gắng sử dụng thư viện fullcalendar trong ứng dụng của mình. Trong tài liệu của họ trong Sử dụng cơ bản, tôi đã tìm thấy điều này:Cách bao gồm biểu định kiểu và javascripts từ npm install

Bước đầu tiên để nhúng lịch trên trang web là phải có các tệp JavaScript và CSS phải . Hãy chắc chắn rằng bạn đã bao gồm các stylesheet FullCalendar, cũng như FullCalendar, jQuery, và Moment file JavaScript, trong trang của bạn:
<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> 

Và dưới Tải về, nó nói này:

Bạn có thể cài đặt FullCalendar qua NPM:

$ npm install fullcalendar

Điều tôi không hiểu là tôi tìm các tệp fullcalendar.css, jquery.min.js, moment.min.js và fullcalendar.js ở đâu? Cài đặt NPM không tải thư mục vào thư mục tải xuống mà tôi có thể kéo vào dự án của tôi, nó thêm tệp vào thư mục node_modules của tôi và tôi nghi ngờ tôi sẽ lục lọi trong đó cho tệp (thư mục node_modules của tôi có hàng nghìn trong đó). Tôi đã thử sử dụng webpack để đóng gói các tệp js, nghĩ rằng nó có thể tự động bao gồm chúng trong gói, nhưng điều đó không hoạt động. Tôi đang thiếu gì?

Nguồn

2016-12-06 Wylliam Judd

Tại sao mọi người downvoting câu hỏi này? Nếu câu trả lời là hiển nhiên, tại sao không chỉ đăng câu trả lời? –

".. Tôi phải đi lục lọi trong đó cho các tập tin" tốt, đây thực sự là những gì bạn phải làm. –

Ồ thực sự? Điều đó gây ngạc nhiên cho tôi, nhưng không khó. –

Bạn không cần phải có bất kỳ thẻ script hoặc liên kết stylesheet trong tiêu đề nếu bạn sử dụng webpack, với điều này 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' 
     } 
    ] 
    } 
};

Và bạn cần phải cài đặt NPM babel. Và nếu bạn muốn webpack để xử lý các tập tin css của bạn cho bạn quá, bạn có thể npm cài đặt phong cách nạp và css-loader. Dưới đây là package.json tôi:

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

Sau đó, tập tin index.html của tôi không cần các thẻ script:

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

Và tôi chỉ bao gồm các gói trong tập tin javascript của tôi:

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

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

Tôi vẫn đang tìm cách dọn dẹp cách tôi nhập tệp css, nhưng ít nhất tôi không có tệp html trông như thế này:

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

Vui lòng cho tôi biết cách bao gồm tệp css rõ ràng hơn.

Nguồn

2016-12-06 01:14:07

Cách bao gồm biểu định kiểu và javascripts từ npm install

Trả lời

Các vấn đề liên quan