如何从NPM安装中包括样式表和JavaScript

这感觉是如此基础，以至于没有人打扰它。我正在尝试在我的应用中使用fullcalendar库。在"基本用法"下的文档中，我发现了这一点：

在网页上嵌入日历的第一步是右JavaScript和CSS文件。确保您包括 FullCalendar样式表，以及Fullcalendar，jQuery和时刻的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 install不会将目录下载到我可以拖入项目中的下载目录中，它将文件添加到我的 node_modules目录中，我怀疑我应该在其中浏览文件以获取文件（我的node_modules目录其中有成千上万的目录）。我尝试使用webpack捆绑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'
      }
    ]
  }
};

您需要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文件。

相关内容

最新更新

热门标签：