如何在npm install中包含样式表和javascripts

This feels so basic that no one bothers to explain it. I'm trying to use the fullcalendar library in my app. In their documentation under Basic Usage, I found this:

这感觉非常基本，没有人愿意解释它。我正在尝试在我的应用程序中使用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:

在网页上嵌入日历的第一步是拥有正确的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>

And under Download, it says this:

在下载中，它说：

You can install FullCalendar via NPM:

您可以通过NPM安装FullCalendar：

$ npm install fullcalendar

$ npm安装fullcalendar

What I don't understand is, where do I find the fullcalendar.css, jquery.min.js, moment.min.js and fullcalendar.js files to include? NPM install doesn't download a folder into my downloads folders that I can drag into my project, it adds files to my node_modules folder, and I doubt I'm supposed to go rummaging in there for the files (my node_modules folder has thousands of folders in it). I tried using webpack to bundle the js files, thinking it might automatically include them in the bundle, but that didn't work. What am I missing?

我不明白的是，我在哪里可以找到包含的fullcalendar.css，jquery.min.js，moment.min.js和fullcalendar.js文件？ NPM安装不下载我的下载文件夹中的文件夹，我可以将其拖入我的项目，它将文件添加到我的node_modules文件夹，我怀疑我应该在那里搜索文件（我的node_modules文件夹有数千个文件夹里面）。我尝试使用webpack捆绑js文件，认为它可能会自动将它们包含在捆绑包中，但这不起作用。我错过了什么？

1 个解决方案

#1

You don't need to have any of the script tags or stylesheet links in the header if you use webpack, with this webpack.config.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'
      }
    ]
  }
};

And you need to npm install babel. And if you want webpack to handle your css files for you too, you can npm install style-loader and css-loader. Here's my package.json:

你需要npm安装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"
}

Then my index.html file doesn't need the script tags:

然后我的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>

And I just include the packages in my javascript file:

我只是在我的javascript文件中包含这些包：

import $ from 'jquery'
import 'fullcalendar'
import 'fullcalendar/dist/fullcalendar.css'

$(document).ready(() => {
  $('#calendar').fullCalendar()
})

I'm still looking for a way to clean up the way I import the css file, but at least I don't have an html file that looks like this:

我仍然在寻找一种方法来清理我导入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>

Please let me know how to include the css file more cleanly.

请让我知道如何更干净地包含css文件。

#1