【问题标题】:inject node modules files into index.html将节点模块文件注入 index.html
【发布时间】:2018-06-04 02:41:32
【问题描述】:

我使用 bower 和 npm 作为包管理器来处理依赖项。现在凉亭正在显示

npm WARN deprecated bower@1.8.2: ...psst! 
Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: 
https://bower.io/blog/2017/how-to-migrate-away-from-bower/

所以我使用bower-away 集成了yarn。现在所有 bower 依赖项都移到了我的 package.json 中,如下所示

"@bower_components/angular": "angular/bower-angular#~1.6.4",
"@bower_components/jquery": "jquery/jquery-dist#>= 1.9.1"

我使用wiredep 将所有依赖库注入到 index.html 中。它将自动处理 bower 依赖项。 现在我已经完全删除了bower,所以这行不通。 有没有其他方法可以将依赖项移动到 index.html 中。目前我正在使用gulp inject 方法注入所有文件,如下所示.pipe(inject(gulp.src(["./src/*.js", "./src/*.css"], {read: false})),但它并未处理所有包。因为路径完全不同。 例如:jquery 和 angular 文件夹,如下所示

任何人都可以建议是否有任何其他方法可以实现这一点。

【问题讨论】:

  • 你搞定了吗?

标签: angularjs node.js dependency-injection gulp bower


【解决方案1】:

您仍然可以使用 gulp inject 修复它:

gulp.task('injectfiles', function () {

    var appJS= ["./src/*.js"];// pattern to match your files

    var  libJS= [           
                '(path where jquery exist)/jquery.js',
                '(path where angular exist)/angular.js'
                ];

          var  jsOrder= [
                '**/jquery.js',
                '**/angular.js',
                '(rest lib js)'
                '**/app.module.js',
                '**/*.module.js',
                '**/*.constants.js',
                '**/*.value.js',
                '**/*.config.js',
                '**/*.route.js',
                '**/*.filter.js',
                '**/*.service.js',
                '**/*.controller.js',
                '**/*.directive.js',
                '**/*.js'
            ];

         var src = [].concat(libJS,appJS)


        return gulp
        .src('index path')
        .pipe(inject(src, '', jsOrder))
        .pipe(gulp.dest('dest path'))
})



function inject(src, label, order) {
    //  var options = { read: false };
    var options = {}
    if (label) {
        options.name = 'inject:' + label
    }

    return $.inject(orderSrc(src, order), options)
}


function orderSrc(src, order) {
    // order = order || ['**/*'];
    return gulp
        .src(src)
        .pipe($.if(order, $.order(order)))
}

【讨论】:

  • 我已经更新了上面的代码,但是我得到了错误uncaught SyntaxError: Unexpected token < angular.min.js:1 Uncaught SyntaxError: Unexpected token < angular-cookies.min.js:1 Uncaught SyntaxError: Unexpected token < angular-ui-router.min.js:1
  • libJS 包含您网站中需要的所有库,因为我从异常中 sww 您还依赖于 angular-cookies.min.js angular-ui-router.min.js ... 等等,所以将它们全部添加到这个数组中...还有jsOrder 是为所有js 指定要注入index.html 的顺序,因此您需要再次以正确的顺序指定所有lib js(如您在jsOrder 的前三行中所见数组)...以这种方式肯定可以工作...请记住webpack作为更好的解决方案。
  • 注入后我可以看到文件被注入为 index.html 文件。我无法通过查看检查元素在浏览器中打开 js 文件。
猜你喜欢
  • 2015-12-26
  • 2019-04-09
  • 2021-03-21
  • 1970-01-01
  • 2015-08-12
  • 1970-01-01
  • 2017-04-03
  • 2018-03-14
  • 1970-01-01
相关资源
最近更新 更多