天天看点

Vue - required is not defined - browserifynpm安装browserify的问题总结

Vue - required is not defined - browserifynpm安装browserify的问题总结

代码如下:

  • index.html
  • main.js
  • mathUtil.js
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./src/main.js"></script>
</body>
</html>      

main.js 引用mathUtil.js

main.js

const {add, mul} = require('./mathUtils.js')

console.log(add(10, 10));
console.log(mul(10, 30));      

mathUtil.js

function add(num1, num2) {
  return num1 + num2;
}

function mul(num1, num2) {
  return num1 * num2;
}

module.exports = {
  add,
  mul
}      

浏览器打开index.html时,报错:“Uncaught ReferenceError: require is not defined”

原因:浏览器无法识别require关键字。require是node.js环境下的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    this === window ? console.log('browser') : console.log('node');
    /*
        判断global对象是否为window,
        为window在浏览器中运行
        不为window在node环境中运行
    */
  </script>
</body>
</html>      

打印结果为brower,可知运行环境是browser。

解决方案

使用browserify编译js,转成浏览器可识别的文件。

第一步:npm i -g browserify

第二步:set-ExecutionPolicy RemoteSigned

第三步:browserify main.js -o dist.js      

-o 表示打包后的输出文件。

dist.js内容如下

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){

const {add, mul} = require('./mathUtils.js')

console.log(add(10, 10));
console.log(mul(10, 30));

},{"./mathUtils.js":2}],2:[function(require,module,exports){
function add(num1, num2) {
  return num1 + num2;
}

function mul(num1, num2) {
  return num1 * num2;
}

module.exports = {
  add,
  mul
}
},{}]},{},[1]);      

修改index.html代码后,在浏览器中打开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./dist/dist.js"></script>
</body>
</html>      

参考

​​npm安装browserify的问题总结​​

继续阅读