javascript - 我如何通过脚本标签执行/_next/static/xxx.js

标签 javascript next.js

我自定义了 next.config (webpack) 来构建静态 js 文件 (.next/static/loader.js)。

原始的loader.js是一个IIFE:

(function stickerLoader(){
  alert('Hello');
  // ... some source code
}())

其用法如下:

<script type="text/javascript" src="/_next/static/loader.js"></script>

但是,上面的代码不会立即执行,因为它被编译为:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["static/loader.js"],{

/***/ "./components/Sticker/loader.js":
/*!**************************************!*\
  !*** ./components/Sticker/loader.js ***!
  \**************************************/
/*! no static exports found */
/***/ (function(module, exports) {

(function stickerLoader() {
  alert('Hello');
  // ... some minified source code
})();

/***/ })

},[["./components/Sticker/loader.js","static/runtime/webpack.js"]]]);

Next.js 是否有任何设置可以删除 WEBPACK WRAPPER,并仅保留我的源代码,所以我的预期结果如下:

(function stickerLoader() {
  alert('Hello');
  // ... some minified source code
})();

我的next.config.js:

module.exports = {
  webpack(config, options) {
    return merge(config, {
      entry() {
        return config.entry().then(entry => {
          return Object.assign({}, entry, {
            'static/loader.js': path.resolve(
              __dirname,
              'components',
              'Sticker',
              'loader.js'
            )
          });
        });
      }
    });
 };
};

最佳答案

如果你想要它没有任何 webpack 东西,为什么要把它添加到 webpack 构建中?

如果这是一个简单的js文件,请将其作为常规静态js文件放入public/(或v9.0.5及以下版本的static/)文件夹中。

关于javascript - 我如何通过脚本标签执行/_next/static/xxx.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59241915/

相关文章:

next.js - 下一个js : server rendered code blocks highlighted by Prismjs mismatches and causes re-render due to leading whitespace on class attribute

javascript - Node.js:无法读取未定义的属性 'then'(嵌套查询)

javascript - 单击删除按钮时删除文本框、hr 和文本

javascript - Deno,Fresh 框架 - html 模板操作

javascript - 如何仅在 NextJS 站点构建期间使用 getInitialProps?

javascript - 如何捕获 JavaScript 中的动态导入错误?

node.js - 使用 Next 或 Node 转发第 3 方 API 响应的正确方法?

javascript - 为什么在 Chrome 中,当在 mousedown 处理程序中附加输入时,它会获得焦点?

javascript - 使用新 API 刷新多个数据表

javascript - 如何在 nextJS getserversideprops 中使用 firebase