如何通过纱线将库添加到 index.html答案

【问题标题】：How to add libraries to index.html by yarn如何通过纱线将库添加到 index.html
【发布时间】：2018-04-12 17:50:33
【问题描述】：

我的问题是关于架构以及如何将已安装的库添加到 index.html？我正在使用 SAP 应用程序（AngularJS、nodeJS）。一切正常，但是当我从凉亭迁移到纱线时，我被卡住了。我不明白如何将库添加到 index.html。

后来我有了以下文件结构：

.
├── bower_components
|   ├── …
|   └── …
├── node_modules
|   ├── …
|   └── …
├── app
|   ├── …
|   └── …
├── bower.json
├── package.json
├── index.html

之前我通过wiredep自动将js文件添加到脚本部分索引.html：

<!-- bower:js -->
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/tether/dist/js/tether.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/angular-xeditable/dist/js/xeditable.js"></script>
<script src="../../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../../bower_components/angular-route/angular-route.js"></script>
<script src="../../bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script>
<script src="../../bower_components/angular-animate/angular-animate.js"></script>
<script src="../../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../../bower_components/angular-read-more/dist/readmore.min.js"></script>
<script src="../../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script src="../../bower_components/angular-js-xlsx/angular-js-xlsx.js"></script>
<script src="../../bower_components/angular-ymaps/angular-ymaps.js"></script>
<script src="../../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../../bower_components/query-string/query-string.js"></script>
<script src="../../bower_components/angular-oauth2/dist/angular-oauth2.js"></script>

但后来当我从 bower 迁移到 yarn 时，我只有一个 node_modules 文件夹：

.
├── node_modules
|   ├── … modules to backend (nodejs)
|   └── … modles to frontend (angularJS and so on)
├── app
|   ├── …
|   └── …
├── package.json
├── index.html

当我使用 gulp-inject 在 index.html 中自动添加 js 库时，gulp 会将所有 js 文件（超过 1000 个文件）添加到 index.html。其中大多数与后端有关。如何解决我的问题？

【问题讨论】：

标签： frontend node-modules yarnpkg

【解决方案1】：

尝试使用捆绑包。需要主包文件中的所有库，如下所示：'use strict'; var angular = require('angular'); var moment = require('moment');

browserify 可以帮助解决这个问题。

希望这能让你走上正轨。

【讨论】：