javascript - 节点上的客户端：未捕获ReferenceError：未定义require(Client on node: Uncaught ReferenceError: require is not defined)

Question

So, I am writing an application with the node/express + jade combo.(因此，我正在使用node / express + jade组合编写应用程序。)

I have client.js , which is loaded on the client.(我有client.js ，它已加载到客户端上。) In that file I have code that calls functions from other JavaScript files.(在该文件中，我有调用其他JavaScript文件中的函数的代码。) My attempt was to use(我的尝试是使用) var m = require('./messages'); in order to load the contents of messages.js (just like I do on the server side) and later on call functions from that file.(为了加载messages.js的内容（就像我在服务器端一样），然后再加载该文件的调用函数。) However, require is not defined on the client side, and it throws an error of the form Uncaught ReferenceError: require is not defined .(但是，在客户端未定义require ，并且抛出Uncaught ReferenceError: require is not defined形式的错误Uncaught ReferenceError: require is not defined 。) These other JS files are also loaded on runtime at the client because I place the links at the header of the webpage.(这些其他JS文件也会在运行时在客户端上加载，因为我将链接放置在网页的标题上。) So the client knows all the functions that are exported from these other files.(因此，客户端知道从这些其他文件导出的所有功能。) How do I call these functions from these other JS files (such as messages.js ) in the main client.js file that opens the socket to the server?(如何从打开服务器套接字的主client.js文件中的其他其他JS文件（例如messages.js ）调用这些函数？)   ask by MightyMouse translate from so

Answer 1

This is because require() does not exist in the browser/client-side JavaScript.(这是因为在浏览器/客户端JavaScript中不存在require() 。)

Now you're going to have to make some choices about your client-side JavaScript script management.(现在，您将不得不对客户端JavaScript脚本管理做出一些选择。) You have three options:(您有三种选择：) Use <script> tag.(使用<script>标记。) Use a CommonJS implementation.(使用CommonJS实现。) Synchronous dependencies like Node.js(同步依赖项，例如Node.js) Use an AMD implementation.(使用AMD实施。) CommonJS client side-implementations include:(CommonJS客户端实现包括：) (most of them require a build step before you deploy)(（其中大多数需要在部署之前进行构建）) Browserify - You can use most Node.js modules in the browser.(Browserify-您可以在浏览器中使用大多数Node.js模块。) This is my personal favorite.(这是我个人的最爱。) Webpack - Does everything (bundles JS, CSS, etc).(Webpack-做所有事情（捆绑JS，CSS等）。) Made popular by the surge of React.js.(由于React.js的激增而流行。) Notorious for its difficult learning curve.(因学习曲线困难而臭名昭著。) Rollup - New contender.(汇总 -新竞争者。) Leverages ES6 modules.(利用ES6模块。) Includes tree-shaking abilities (removes unused code).(包括摇树能力（删除未使用的代码）。) You can read more about my comparison of Browserify vs (deprecated) Component .(您可以阅读有关我的Browserify与（不推荐使用）Component比较的更多信息。) AMD implementations include:(AMD的实现包括：) RequireJS - Very popular amongst client-side JavaScript developers.(RequireJS-在客户端JavaScript开发人员中非常受欢迎。) Not my taste because of its asynchronous nature.(因为它的异步特性，所以不是我的口味。) Note, in your search for choosing which one to go with, you'll read about Bower .(请注意，在搜索选择与之配套的产品时 ，您会了解到Bower 。) Bower is only for package dependencies and is unopinionated on module definitions like CommonJS and AMD.(Bower仅用于程序包依赖性，并且在CommonJS和AMD等模块定义上不受质疑。) Hope this helps some.(希望这会有所帮助。)