如何使用 RequireJS 加载前端 NPM/Yarn 包
Posted
技术标签:
【中文标题】如何使用 RequireJS 加载前端 NPM/Yarn 包【英文标题】：How to load front end NPM/Yarn packages with RequireJS 【发布时间】：2018-01-09 01:43:33 【问题描述】：我有一个用 Knockout 编写的前端 SPA。由于它的大小，我想将其拆分为多个文件，使我的文件夹结构看起来像这样：
node_modules
|- knockout
\- requirejs
components
|- MyFutureViewModel.js
\- etc.
index.html
app.js
Index.html 看起来像这样：
<!DOCTYPE html>
<html>
<head>
<title>NCounter</title>
<meta charset="utf-8">
<script type="text/javascript" data-main="app.js" src="./node_modules/requirejs/require.js"></script>
</head>
<body>
<p>The name is <input data-bind="value: name" /></p>
<p>You entered <span data-bind="text: name"></span>.</p>
</body>
</html>
我的 app.js 文件如下所示：
requirejs.config(
//Pass the top-level main.js/index.js require
//function to requirejs so that node modules
//are loaded relative to the top-level JS file.
nodeRequire: require
);
require(['knockout'], function(ko)
var viewModel = function()
name: ko.observable('name')
;
ko.applyBindings(viewModel);
);
但是，requirejs 似乎没有看到淘汰赛。有没有我遗漏的配置或步骤？
【问题讨论】：
【参考方案1】：你必须修改你的 RequireJS 配置
requirejs.config(
baseUrl: "node_modules/",
paths:
// assuming that knockout lives in the node_modules/knockout/knockout.js file
// if not, you have to specify relative to `node_modules` path
// without .js extension
'knockout': 'knockout/knockout',
);
【讨论】：
以上是关于如何使用 RequireJS 加载前端 NPM/Yarn 包的主要内容，如果未能解决你的问题，请参考以下文章
WEB前端开发 使用requirejs 引入脚本为啥页面首次加载会出现其他依赖jquery的文件先于jquery加载