这感觉很基础，没有人费心去解释它。我正在尝试使用 fullcalendar我的应用程序中的库。在他们的“基本用法”下的文档中，我发现了这一点:
The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar, jQuery, and Moment JavaScript files, in the of your 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>
在“下载”下，它是这样说的:
You can install FullCalendar via NPM:
$ npm install fullcalendar
我不明白的是，我在哪里可以找到 fullcalendar.css , jquery.min.js , moment.min.js和 fullcalendar.js要包含的文件？
NPM install 不会将目录下载到我可以拖到我的元素中的下载目录中，它会将文件添加到我的 node_modules目录，我怀疑我是否应该在那里翻找文件(我的 node_modules 目录中有数千个目录)。我尝试使用 Webpack 来捆绑 js 文件，认为它可能会自动将它们包含在 bundle 中，但这没有用。我错过了什么？
最佳答案
如果您使用 Webpack，您不需要在 header 中包含任何脚本标记或样式表链接，使用此 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 文件。
关于javascript - 如何从 npm install 中包含样式表和 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40985948/