包含npm包的ELI5

Question

我理解在应用程序中包含包，使用的是一个框架，比如角2，但当涉及到将包包含到静态的、完全定制的网站时，我就迷失了。例如：

• 我创建了package.json文件，很好。
• 我安装并--将软件包保存到package.json文件中，很好。

这次又是什么？对于Javascript包，它通常说要写require('');行，或者对于CSS包，它可能会说包含@import('');，但是在哪里？

通常，我只是运行一个带有/css和/js文件夹的静态站点。我是在主JS或CSS文件中插入require()还是import()？如果是这样的话，它如何知道如何读取到/node_modules文件夹？

提前谢谢。

Answer 1

您有许多选项，并且列表可能会随着时间的推移和新工具的创建而改变。以下是您当前的一些选择：

1.在HTML中引用javascript文件

这是最基本的选择。只需将其添加到HTML：<script src="node_modules/package/package.min.js"></script>即可。这并不好，因为您需要手动将每个文件添加到HTML中，并确保按正确的顺序添加它们(以防某些包有依赖项)。这也意味着你必须把你的整个node_modules文件夹包括在你的网站上，这可能是你不想做的。

如果使用此选项，就不会有require('')。您只需希望包在全局命名空间上公开一个变量即可。

2.使用像gulp或webpack这样的工具捆绑您的引用

我推荐Webpack，因为它是从盒子里出来的，支持进口声明.请参阅开始指南。您也可以使用gulp，但是需要像gulp-browserify这样的插件才能使导入工作。

有几种方法可以导入模块。您可能希望使用import而不是require。对于简单模块：

import _ from 'lodash'

对于更复杂的模块，如角(npm install @angular/core)：

import { Component } from '@angular/core';

要使用Webpack，请跑：

npm install --global webpack
webpack app/index.js dist/bundle.js

其中app/index.js是您的入口点，而dist/bundle.js是webpack将要构建的输出文件。index.js导入的任何文件都将包含在输出文件中。然后，您的HTML文件应该引用dist/bundle.js。