浏览器如何实现import与require

时间  2020-07-05
标签 浏览器 如何 实现 import require 栏目 浏览器 繁體版
原文   原文链接

一、浏览器是否支持import和require？

1.一、对require支持状况

// add.js
module.exports = {
  add: function(num1, num2) {
    return num1 + num2
  }
}

// index.js
const { add } = require('./add')

document.getElementById("app").innerHTML = add(1, 2)

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./index.js"></script>
</body>
</html>

使用http-server启动本地服务，访问后报了以下错误：html

image.png

能够明显地得知浏览器不支持requirewebpack

1.二、对import支持状况

// add.js
export const add = function(num1, num2) {
  return num1 + num2;
}

// index.js
import { add } from './add'

document.getElementById("app").innerHTML = add(1, 2)

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./index.js"></script>
</body>
</html>

启动本地服务访问会报以下错误：es6

image.png

所以，浏览器也不支持importweb

二、babel是如何处理import和require？

这里使用babel命令行方式来编译js，安装相关依赖npm

cnpm i -D @babel/core @babel/cli @babel/preset-env

2.一、babel处理require

脚本json

// add.js
module.exports = {
  add: function(num1, num2) {
    return num1 + num2;
  }
}

// index.js
const { add } = require('./add')

module.exports = add

执行如下命令gulp

babel index.js -o build.js --presets=@babel/preset-env

构建后的代码：浏览器

"use strict";

var _require = require('./add'),
    add = _require.add;

module.exports = add;

能够看到babel对require是不作处理的，就加了一个严格模式babel

2.二、babel处理import

脚本app

// add.js
export const add = function(num1, num2) {
  return num1 + num2;
}

// index.js
import { add } from './add'

export default add

执行如下命令

babel index.js -o build.js --presets=@babel/preset-env

构建后的代码：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _add = require("./add");

var _default = _add.add;
exports["default"] = _default;

能够看到babel会对import进行处理，转化为commonjs规范。export default 被转换成 exports["default"]，同时还加了一个标记变量 __esModule 来描述这个 exports 是由 es6 export 转换过来的。

三、webpack、gulp是如何处理import和require？

3.一、webpack如何处理import与require

安装相关依赖

cnpm i -D webpack webpack-cli @babel/core @babel/preset-env

添加执行脚本

// package.json
scripts: {
    "build": "webpack --config webpack.config.js --mode production"
}

webpack.config.js

const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  }
}
3.1.一、对import处理

代码：

// add.js
export const add = function(num1, num2) {
  return num1 + num2;
}

// index.js
import { add } from './add'

export default add

构建结果：

!(function (e) {
  var t = {};
  function r(n) {
    if (t[n]) return t[n].exports;
    var o = (t[n] = { i: n, l: !1, exports: {} });
    return e[n].call(o.exports, o, o.exports, r), (o.l = !0), o.exports;
  }
  (r.m = e),
    (r.c = t),
    (r.d = function (e, t, n) {
      r.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: n });
    }),
    (r.r = function (e) {
      "undefined" != typeof Symbol &&
        Symbol.toStringTag &&
        Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
        Object.defineProperty(e, "__esModule", { value: !0 });
    }),
    (r.t = function (e, t) {
      if ((1 & t && (e = r(e)), 8 & t)) return e;
      if (4 & t && "object" == typeof e && e && e.__esModule) return e;
      var n = Object.create(null);
      if (
        (r.r(n),
        Object.defineProperty(n, "default", { enumerable: !0, value: e }),
        2 & t && "string" != typeof e)
      )
        for (var o in e)
          r.d(
            n,
            o,
            function (t) {
              return e[t];
            }.bind(null, o)
          );
      return n;
    }),
    (r.n = function (e) {
      var t =
        e && e.__esModule
          ? function () {
              return e.default;
            }
          : function () {
              return e;
            };
      return r.d(t, "a", t), t;
    }),
    (r.o = function (e, t) {
      return Object.prototype.hasOwnProperty.call(e, t);
    }),
    (r.p = ""),
    r((r.s = 0));
})([
  function (e, t, r) {
    "use strict";
    r.r(t);
    t.default = function (e, t) {
      return e + t;
    };
  },
]);
3.1.二、对require处理

代码：

// add.js
module.exports = {
  add: function(num1, num2) {
    return num1 + num2;
  }
}

// index.js
const { add } = require('./add')

module.exports = add

构建结果

!(function (e) {
  var t = {};
  function n(r) {
    if (t[r]) return t[r].exports;
    var o = (t[r] = { i: r, l: !1, exports: {} });
    return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports;
  }
  (n.m = e),
    (n.c = t),
    (n.d = function (e, t, r) {
      n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r });
    }),
    (n.r = function (e) {
      "undefined" != typeof Symbol &&
        Symbol.toStringTag &&
        Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
        Object.defineProperty(e, "__esModule", { value: !0 });
    }),
    (n.t = function (e, t) {
      if ((1 & t && (e = n(e)), 8 & t)) return e;
      if (4 & t && "object" == typeof e && e && e.__esModule) return e;
      var r = Object.create(null);
      if (
        (n.r(r),
        Object.defineProperty(r, "default", { enumerable: !0, value: e }),
        2 & t && "string" != typeof e)
      )
        for (var o in e)
          n.d(
            r,
            o,
            function (t) {
              return e[t];
            }.bind(null, o)
          );
      return r;
    }),
    (n.n = function (e) {
      var t =
        e && e.__esModule
          ? function () {
              return e.default;
            }
          : function () {
              return e;
            };
      return n.d(t, "a", t), t;
    }),
    (n.o = function (e, t) {
      return Object.prototype.hasOwnProperty.call(e, t);
    }),
    (n.p = ""),
    n((n.s = 0));
})([
  function (e, t, n) {
    const { add: r } = n(1);
    e.exports = r;
  },
  function (e, t) {
    e.exports = {
      add: function (e, t) {
        return e + t;
      },
    };
  },
]);

其实，从构建结果能够看出webpack会对import和require进行处理，用原生js实现了这两种引入方式。

3.一、gulp如何处理import与require

安装相关依赖

cnpm i -D gulp gulp-babel @babel/core @babel/preset-env

gulpfile.js构建脚本

const gulp = require('gulp')
const babel = require('gulp-babel')

const script = function() {
  return gulp.src('./index.js')
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(gulp.dest('./dist'))
}

module.exports.build = script
3.1.一、处理import

构建结果

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _add = require("./add");

var _default = _add.add;
exports["default"] = _default;
3.1.二、处理require

构建结果

"use strict";

var _require = require('./add'),
    add = _require.add;

module.exports = add;

从构建结果能够看出gulp仅仅会处理import，将import转化为commonjs规范，可是不会处理require。

四、总结

一、浏览器不支持import和require
二、webpack、bowserify构建工具会处理require，可是gulp不会
三、处理方式是使用原生js实现require

参考：
https://www.jianshu.com/p/547...

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程