[英]How to include stylesheets and javascripts from npm install
这感觉非常基本,以至于没有人费心去解释它。 我正在尝试在我的应用程序中使用fullcalendar
库。 在“基本用法”下的文档中,我发现了这一点:
在网页上嵌入日历的第一步是拥有正确的 JavaScript 和 CSS 文件。 确保在页面中包含 FullCalendar 样式表以及 FullCalendar、jQuery 和 Moment 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
文件?
NPM 安装不会将目录下载到我可以拖到我的项目中的下载目录中,而是将文件添加到我的node_modules
目录中,我怀疑我是否应该在那里翻找文件(我的node_modules
目录有数千个其中的目录)。 我尝试使用 Webpack 来打包 js 文件,认为它可能会自动将它们包含在包中,但这不起作用。 我错过了什么?
如果您使用 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 install babel
。 如果你也希望 Webpack 为你处理 CSS 文件,你可以npm install
style-loader
和css-loader
。 这是我的package.json
:
{
"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
文件不需要脚本标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src='bundle.js'></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
我只是在我的 JavaScript 文件中包含这些包:
import $ from 'jquery'
import 'fullcalendar'
import 'fullcalendar/dist/fullcalendar.css'
$(document).ready(() => {
$('#calendar').fullCalendar()
})
我仍在寻找一种方法来清理我导入 CSS 文件的方式,但至少我没有像这样的 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>
请让我知道如何更干净地包含 CSS 文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.