如何从 npm install 中包含样式表和 javascript
Posted
技术标签:
【中文标题】如何从 npm install 中包含样式表和 javascript【英文标题】：How to include stylesheets and javascripts from npm install 【发布时间】：2017-04-20 12:52:23 【问题描述】：这感觉很基础，没有人费心去解释它。我正在尝试在我的应用程序中使用 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 文件，认为它可能会自动将它们包含在捆绑包中，但这不起作用。我错过了什么？
【问题讨论】：
为什么人们不赞成这个问题？如果答案很明显，为什么不直接发布答案？ "..我应该去那里翻找文件"好吧，这实际上是你必须做的。 谢谢。为什么这被认为是一个坏问题？几个小时以来我一直试图弄清楚这一点，但我从来没有遇到过关于 Grunt 或 Gulp 的任何事情。 嗯......问题是关于链接从 NPM 下载的资源。就像它一样简单，您只需要逐字添加它们的相对路径。 How to include scripts located inside the node_modules folder?的可能重复 【参考方案1】：如果您使用 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 文件。
【讨论】：
你有没有想过干净地添加css？ 这是我得到的最好的。以上是关于如何从 npm install 中包含样式表和 javascript的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 npm 在 vue.js 中包含 bootstrap-vue？