ELI5包括一个npm包

Question

我理解使用Angular 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，因为它开箱即用，支持import语句。请参阅getting started指南。你也可以使用gulp，但是你需要一个像gulp-browserify这样的插件才能使导入工作。

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

import _ from 'lodash'

对于更复杂的模块，如Angular（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。