javascript - webpack - 我什么时候应该对 application.js 文件使用 require vs import

Question

我很难理解 application.js 文件 (Rails 6) 中“require”和“import”之间的区别。

我有一段 Michael Hartl 的书摘录，其中描述了将 jquery 和 bootstrap 添加到我的应用程序的方法。

步骤:

yarn add jquery@3.4.1 bootstrap@3.4.1

然后添加到config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
module.exports = environment

最后在 application.js 中:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import "bootstrap"

问题是 - 为什么需要 jquery 并导入 bootstrap？谢谢，

更新

编辑 - @arieljuod 的评论帮助我在 javascript 领域寻找解决方案，我将留下这个问题以供将来引用。application.js 是一个 javascript 文件，与 rails 本身无关。

Answer 1

• 事实上 require 并不被浏览器原生支持(检查 here 和 here )

  • 这意味着只要您调用require，webpack 就必须在内部使用import。

• 比较 import和 dynamic dependency management with require来自 webpack 文档。

因此:我会在动态用例中使用 require，如文档示例中所示，并在其他任何地方使用 import。

---

我不确定使用 require 是否对 treeshaking 有任何副作用。 documentation声明它依赖于 import 和 export

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export.

---

为了避免使用 JQuery 的示例，文档建议在此处使用 ProvidePlugin: https://webpack.js.org/plugins/provide-plugin/#usage-jquery