草庐IT

javascript - 从 Webpack 1.x 迁移到 2.x

coder 2024-05-06 原文

在 Webpack 1.x 中，我曾经定期执行以下操作:

require.ensure([ './mod2.js' ], ( require ) => {
    setTimeout(() => {
        // some later point in time, most likely through any kind of event
        var data = require( './mod2.js' ); // actual evaluating the code
    },1100);
}, 'myModule2');

通过这种技术，我们能够通过网络传输 webpack-bundle，但会在稍后的某个时间点评估该包的实际内容(JavaScript 代码)。此外，使用 require.ensure 我们可以命名 bundle ，在本例中为 myModule2，因此我们可以在捆绑执行 webpack 时看到名称/别名>.

在 Webpack 2.x 中，新的方法是使用 System.import。虽然我现在喜欢接收 Promise 对象，但我对这种风格有两个问题。上面代码的等价物如下所示:

System.import( './mod2.js' ).then( MOD2 => {
    // bundle was transferred AND evaluated at this point   
});
  • 我们现在如何拆分传输和评估？
  • 我们如何仍然命名 bundle ？

Webpack documentation在 Github 上说如下:

Full dynamic requires now fail by default

A dependency with only an expression (i. e. require(expr)) will now create an empty context instead of an context of the complete directory.

Best refactor this code as it won't work with ES6 Modules. If this is not possible you can use the ContextReplacementPlugin to hint the compiler to the correct resolving.

我不确定这在本案中是否起作用。他们还在其中讨论了代码拆分，但非常简短，他们没有提到任何“问题”或如何解决。

最佳答案

长话短说: System.resolve和 System.register做你想做的大部分事情。这个答案的其余部分是为什么 require.ensure 不能以及 System.import 如何调用其他的。

我 认为 ES6 模块阻止了这种情况的良好运行，尽管通过相关规范来遵循它是很棘手的，所以我可能完全错了。

也就是说，让我们从一些引用开始:

  1. WhatWG module loader
  2. ES6 specification on modules (§15.2)
  3. CommonJS module specification
  4. fantastic 2ality article on ES6 modules

第一个引用解释了更多的行为，虽然我不完全确定它是如何规范化的。后者解释了JS端的实现细节。由于还没有平台实现这一点，我没有关于它在现实生活中如何实际工作的引用，我们将不得不依赖规范。

The require that has been available在 webpack 1.x 中是 CommonJS 和 AMD 要求的混搭。 CommonJS 方面在引用#3 中有所描述，特别是“模块上下文”部分。那里没有提到 require.ensure，也没有提到 AMD“规范”(实际上是这样)，所以这纯粹是 webpack 的发明。也就是说，该功能从来都不是真实的，因为它被指定在某个官方的地方并且看起来很花哨。

也就是说，我认为 require.ensure 与 ES6 模块冲突。调用 System.import 应该调用 import method来自Loader object .引用#2 中的相关部分没有明确说明，但是 §10.1确实提到将加载程序附加到 System。

Loader.prototype.import method并不十分复杂，我们唯一感兴趣的是第 4 步:

  1. Return the result of transforming Resolve(loader, name, referrer) with a fulfillment handler that, when called with argument key, runs the following steps:
    1. Let entry be EnsureRegistered(loader, key).
    2. Return the result of transforming LoadModule(entry, "instantiate") with a fulfillment handler that, when called, runs the following steps:
      1. Return EnsureEvaluated(entry).

流程是解析-注册-加载-评估，您想要在加载和评估之间中断。但是请注意，加载阶段调用 LoadModule stage 设置为 "instantiate"。这意味着并且可能需要该模块已经通过 RequestTranslate 进行了翻译。 ，它会在尝试查找模块的入口点等时进行大量繁重的解析。

这已经完成了比你想要的更多的工作，从它的声音来看。由于模块加载的基础知识需要一个已知的入口点，我认为没有办法避免使用从 System 公开的调用来解析和部分评估模块。你已经知道了。

问题是 System.import 不可能知道——直到解析之后——该模块是必须评估的 ES6 模块还是可以延迟的 webpack 包。必须进行解析才能确定我们是否需要解析，从而导致先有鸡还是先有蛋的问题。

到目前为止，我们一直遵循从 System.import 到 Loader 的路径。 import 调用指示我们所处的导入阶段，假设您想要完成完整的端到端加载过程。底层调用，如 Loader.prototype.load , 提供对这些阶段的细粒度控制。

我不确定您将如何调用前两个阶段(获取和翻译)，但如果您能够翻译和注册一个模块，后面的调用应该简单地评估并返回它。

如果规范准确无误，这应该通过 System.loader 属性公开(在支持实现中)，并且会有您需要调用的方法。您无权访问大部分流程，因此我建议您不要这样做，而是设置您的代码，以便在加载模块时不会运行任何重要内容。如果那不可能，您需要通过注册重新创建流程，但不要回避评估。

关于javascript - 从 Webpack 1.x 迁移到 2.x，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40314627/

javascriptWebpackcodenoreferrernoopenerwebpack-2

有关javascript - 从 Webpack 1.x 迁移到 2.x的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  3. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  4. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  5. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  6. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

  7. 网页设计期末作业，基于HTML+CSS+JavaScript超酷超炫的汽车类企业网站(6页) - 2

    🎉精彩专栏推荐💭文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主💂作者主页:【主页——🚀获取更多优质源码】🎓web前端期末大作业：【📚毕设项目精品实战案例(1000套)】🧡程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作(110套)】🌎超炫酷的Echarts大屏可视化源码：【🔰Echarts大屏展示大数据平台可视化(150套)】🔖HTML+CSS+JS实例代码：【🗂️5000套HTML+CSS+JS实例代码(炫酷代码)继续更新中…】🎁免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程120G干货分享】🥇关于作者:💬历任研发工程师，技术组长，教学总监；

  8. ruby-on-rails - 在页面的最底部包含 javascript 文件 - 2

    我有一个Rails应用程序。还有一个javascript(javascript1.js)文件必须包含在每个View的最底部。我把它放在/assets/javascripts文件夹中。Application.js包含以下代码//=requirejquery//=requirejquery_ujs//=someotherfiles//=require_directory.即使Application.js中不包含javascript1.js，它也会自动包含，不是吗？那么我怎样才能做我想做的事呢？ 最佳答案 单独定义、包含和执行您的java

  9. ruby-on-rails - 为 rails 中的 javascript 生成完整的 url(类似于 javascript_path，但是是 url) - 2

    如何生成指向javascript文件的绝对链接。我想应该有类似下面的东西(不幸的是它似乎不可用):javascript_url'main'#->'http://localhost:3000/javascripts/main.js'代替:javascript_path'main'#->'/javascripts/main.js'我需要绝对URL，因为该javascript文件将用于书签。另外我需要相同的css文件。谢谢，德米特里。 最佳答案 javascript和css文件的绝对URL现在在Rails4中可用ActionView::H

  10. ruby - 处理在 keyup 事件上发生的 javascript 弹出窗口 - 2

    我在HTML页面上有一个文本字段，用于检查您是否输入了1到365之间的值。如果用户输入了无效值，如非数字字符或不在范围内的值，它显示一个弹出窗口。我在watirwiki上看到有一个select_no_wait方法，用于在您从列表中选择无效值时关闭弹出窗口。处理键盘事件时出现的弹出窗口的好方法是什么？我是否需要按照select_no_wait方法的实现方式进行操作，或者我们是否可以启动一个不同的进程来消除调用set方法时可能出现的弹出窗口。带有Javascript验证函数的HTML文件示例如下:varnum=0functionvalidate(e){varcharPressed=Stri

随机推荐