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

Question

这感觉太基础了，没有人费心去解释它。我正在尝试在我的应用程序中使用 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 安装不会将目录下载到我可以拖到我的项目中的下载目录中，它会将文件添加到我的 node_modules 目录中，我怀疑我是否应该在那里翻找文件（我的 node_modules 目录中有数千个目录）。我尝试使用 Webpack 来捆绑 js 文件，认为它可能会自动将它们包含在捆绑包中，但这没有用。我错过了什么？

Answer 1

如果您使用 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 文件。

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

How to include stylesheets and javascripts from npm install

javascript

html

css

fullcalendar

npm-install