通過匯入連接檔案不起作用

一天了，我不明白為什么 babel for gulp 對我不起作用，或者我錯誤地連接了模塊......
瀏覽器中的錯誤是這樣的：

Uncaught ReferenceError: require is not defined
  at main.min.js:1

我像這樣連接模塊：

import focusVisible from "focus-visible";

main.min.js 檔案中的代碼：

"use strict";var e;(e=require("focus-visible"))&&e.__esModule;

吞咽任務：

const { src, dest, series, watch, parallel } = require('gulp'),
      fileinclude = require('gulp-file-include'),
      rename = require("gulp-rename"),
      uglify = require('gulp-uglify-es').default,
      babel = require("gulp-babel"),
      notify = require("gulp-notify"),
      browserSync = require("browser-sync").create()

const changingScripts = () => {
  return src(['src/js/main.js', 'src/js/pages/**/*.js'])
    .pipe(babel())
    .pipe(fileinclude())
    .pipe(dest('dist/js'))
    .pipe(uglify({
      toplevel: true
    }).on('error', notify.onError()))
    .pipe(rename({
      extname: '.min.js'
    }))
    .pipe(dest('dist/js'))
    .pipe(browserSync.stream())
}

package.json 檔案是這樣的：

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "some description of the project",
  "scripts": {},
  "keywords": ["keyword_1", "keyword_2", "keyword_3"],
  "author": "project_author",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/eslint-parser": "^7.16.3",
    "@babel/preset-env": "^7.16.4",
    "@babel/register": "^7.16.0",
    "browser-sync": "^2.27.7",
    "eslint": "^8.2.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.25.3",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-file-include": "^2.3.0",
    "gulp-notify": "^4.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-uglify-es": "^3.0.0"
  }
}

.babelrc 檔案如下所示：

{
  "presets": ["@babel/preset-env"]
}

似乎一切都應用了所需的東西。
如果你能幫忙，我將不勝感激。
整個專案都因為這個錯誤卡住了……
建議不使用就解決問題Webpack:)

uj5u.com熱心網友回復：

似乎您可能缺少將代碼轉換為瀏覽器兼容的構建步驟。該require方法在瀏覽器中不可用。

您必須使用一種工具來轉換您的代碼，以便它可以在瀏覽器中運行。一個這樣的工具是Browserify，另一個是 rollup ，可能還有更多。一般來說，這些工具將依賴源與您的應用程式代碼捆綁在一起，這允許將 require 陳述句轉換為瀏覽器可以理解的其他模式。

你可以這樣想（例子簡化了）：

你寫的代碼

// main.js
const stringify = require('stringify')

alert(stringify({ error: "No authorization" })

node_modules 中的依賴源

// node_modules/stringify/index.js
function stringify(obj) {
  return JSON.stringify(obj);
}

expost.default = stringify

捆綁結果

// dist/main.js
function stringify(obj) {
  return JSON.stringify(obj);
}

alert(stringify({ error: "No authorization" })

Gulp 在他們的瀏覽器存盤庫中托管了一個官方使用示例：

'use strict';

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var log = require('gulplog');
var uglify = require('gulp-uglify');
var reactify = require('reactify');

gulp.task('javascript', function () {
  // set up the browserify instance on a task basis
  var b = browserify({
    entries: './entry.js',
    debug: true,
    // defining transforms here will avoid crashing your stream
    transform: [reactify]
  });

  return b.bundle()
    .pipe(source('app.js', { sourcemaps: true }))
    .pipe(buffer())
        // Add transformation tasks to the pipeline here.
        .pipe(uglify())
        .on('error', log.error)
    .pipe(gulp.dest('./dist/js/', { sourcemaps: '../sourcemaps/' }));
});

Gulp 版本控制：Browserify Transforms

我試圖為您創建一個示例，但很難說最適用于您的專案的 gulp 腳本是什么。我將添加一個示例，但請不要將其視為可供一般使用的修復程式。它試圖模仿您當前的 gulp 腳本的行為。例如，從長遠來看，您可能需要其他行為，因為此腳本創建的捆綁可能不像其他配置或工具所允許的那樣優化。

const { dest } = require("gulp"),
  browserify = require("browserify"),
  babelify = require("babelify"),
  glob = require("glob"),
  source = require("vinyl-source-stream"),
  fileinclude = require("gulp-file-include"),
  rename = require("gulp-rename"),
  uglify = require("gulp-uglify-es").default,
  notify = require("gulp-notify"),
  browserSync = require("browser-sync").create(),
  es = require("event-stream");

const changingScripts = (done) => {
  // Define files you want to have as inputs
  var files = ["src/js/main.js", ...glob.sync("src/js/pages/**/*.js")];
  // Bundle each file separately so that file structure is preserved in
  // dist
  var tasks = files.map((file) => {
    return (
      browserify({
        entries: [file],
        debug: true,
        transform: [
          // Apply babel transforms here so that browserify knows how to bundle
          // the files
          babelify.configure({
            presets: ["@babel/preset-env"],
          }),
        ],
      })
        .bundle()
        // Transform the stream content bable bundling returns into a gulp
        // friendly format
        .pipe(source(file))
        // Not sure how fileinclude is used in your project. May be that it
        // doesn't work when it's configured in this way.
        .pipe(fileinclude())
        .pipe(dest("dist/js"))
        .pipe(
          uglify({
            toplevel: true,
          }).on("error", notify.onError())
        )
        .pipe(
          rename({
            extname: ".min.js",
          })
        )
        .pipe(dest("dist/js"))
        .pipe(browserSync.stream())
    );
  });

  return es.merge(tasks).on("end", done);
};

exports.default = changingScripts;

Gulp：使用 Browserify 創建多個包

標籤：javascript 节点.js 新产品经理 吞咽 吞咽巴别塔

上一篇：無法獲取用戶.joinedAt值

下一篇：Python正則運算式獲取子字串包含'/\'