Question

我正在尝试为项目使用Web组件 - 实质上是由属性驱动的自定义元素，最好由<link rel="import">导入。

问题出在这里：我无法找到关于在哪里放置我的组件依赖的任何外部库的结论性指导，例如moment.js甚至是jQuery。

我见过的大多数组件示例都严格使用vanilla JS。当他们使用外部库时，他们似乎经常使用Bower或npm删除它们，并在组件的HTML中明确地引用它们：

<script type="text/javascript" 
src="/bower_components/jquery/dist/jquery.min.js></script>

这些天我更习惯使用webpack捆绑依赖项，所以这看起来有点奇怪。

我的问题：在组件目录中包含每个组件的库依赖项，或者在项目级别有一个中央node_modules文件夹，它被认为是更好的形式吗？ webpack如何适应这个？

Answer 1

在项目级别拥有一个中央node_modules文件夹会更好。大多数人使用Webpack将代码与其依赖项捆绑在一起。他们为每个组件使用require或import个模块。

<强> a.component.js

import React from 'react'
import $ from 'jquery'

<强> b.component.js

import React from 'react'

<强> app.js

import A from 'a.component.js'
import B from 'b.component.js'

Webpack将有一个＆＃34;条目＆＃34;：app.js并将其编译为output：app.min.js

<强>为什么吗

外部信息：

https://webpack.js.org/concepts/