如何从 npm install 中包含样式表和 javascript答案

【问题标题】：How to include stylesheets and javascripts from npm install如何从 npm install 中包含样式表和 javascript
【发布时间】：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?的可能重复

标签： javascript html css fullcalendar npm-install

【解决方案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？
这是我得到的最好的。