2017-11-04 17 views
2

bower를 사용하지 않으려면 어떻게 전환해야합니까?어떻게이 프로젝트에서 bower를 제거하고 원사 (noob)와 함께 requirejs를 사용할 수 있습니까?

나는 yeoman을 처음 설치했으며 knockoutjs의 발전기는 bower를 사용했습니다. 이제 저는 bower 지원이 제한되어 있고 bootstrap은 popper.js를 사용합니다. v2에서는 bower에 대한 지원이 중단 될 것입니다. 저는 지금 두통을 피하고 동시에 배우고 싶습니다.

RequireJS 및 모든 클라이언트 측 라이브러리는 /src/bower_modules입니다.

npm이나 원사를 사용하여 부트 스트랩을 설치하면 브라우저에 액세스 할 수없는 /node_modules에 설치합니다. gulp를 사용하여 dist 폴더를 /src/bower_modules 폴더로 전송합니까?

폴더 구조 :

/src/ 
    |--bower_modules/ 
    |--app/ 
     |--require.config.js 
/node_modules/ 
/gulpfile.js 

gulpfile.js :

var requireJsRuntimeConfig = vm.runInNewContext(fs.readFileSync('src/app/require.config.js') + '; require;'), 
    requireJsOptimizerConfig = merge(requireJsRuntimeConfig, { 
     out: 'scripts.js', 
     baseUrl: './src', 
     name: 'app/startup', 
     paths: { 
      requireLib: 'bower_modules/requirejs/require' 
     }, 
     include: [ 
      'requireLib', 
      'components/nav-bar/nav-bar', 
      'components/home-page/home', 
      'text!components/about-page/about.html' 
     ], 
     insertRequire: ['app/startup'], 
     bundles: { 
      // If you want parts of the site to load on demand, remove them from the 'include' list 
      // above, and group them into bundles here. 
      // 'bundle-name': [ 'some/module', 'another/module' ], 
      // 'another-bundle-name': [ 'yet-another-module' ] 
     } 
    }), 
    transpilationConfig = { 
     root: 'src', 
     skip: ['bower_modules/**', 'app/require.config.js'], 
     babelConfig: { 
      modules: 'amd', 
      sourceMaps: 'inline' 
     } 
    }, 
    babelIgnoreRegexes = transpilationConfig.skip.map(function(item) { 
     return babelCore.util.regexify(item); 
    }); 

응용 프로그램/require.config.js는 :

var require = { 
    baseUrl: ".", 
    paths: { 
     "bootstrap":   "bower_modules/bootstrap/js/bootstrap.min", 
     "crossroads":   "bower_modules/crossroads/dist/crossroads.min", 
     "hasher":    "bower_modules/hasher/dist/js/hasher.min", 
     "popper":    "bower_modules/popper.js/dist/popper", 
     "jquery":    "bower_modules/jquery/dist/jquery", 
     "knockout":    "bower_modules/knockout/dist/knockout", 
     "knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections", 
     "signals":    "bower_modules/js-signals/dist/signals.min", 
     "text":     "bower_modules/requirejs-text/text" 
    }, 
    shim: { 
     "bootstrap": { deps: ["popper", "jquery"] } 
    } 
}; 

(!) 참고 : 문제의 기원은입니다 I 부트 스트랩에 popper가 필요하고 bootstrasp.bundle은 bower 버전에 포함되어 있지 않습니다. 또한 포퍼는 보어를별로 좋아하지 않으며 그리 오래지지 않을 것입니다. 나는 또한 그것을 포함 시키려고 여러 오류가 있습니다. 나는 또한 좋은 방법을 배우고 싶습니다. 배수지가 오랫동안 주변에 있지 않을 것이기 때문에 나는 그 곳에서 일하는 것이 전혀 마음에 들지 않을 것입니다.

답변

1

Bower 자체가 최근에 블로그를 게시했습니다 : https://bower.io/blog/2017/how-to-migrate-away-from-bower/. 여기 주요 테이크 아웃 :

  1. 수동 bower.json에서 정자를 통해서만 사용할 수있는 모든 항목 당신이 그를 설치 bower-away NPM 패키지를 사용할 수있는 경우 정자와 NPM
  2. 모두에서 사용할 수 있습니다 package.json 모든 패키지를 이동 NPM 대신 정자
  3. dist 디렉토리

SOMET에 작업 러너 스크립트 (그런트/꿀꺽/등 ...) 패키지를 이동 (들) 파일을 쓰기 이 같은 힌지는 그것을해야합니다.

gulp.task('injectNpmPackages', function() { return gulp.src([ path.join('/node_modules/my-package/build/my-package.min.js') ]) .pipe(gulp.dest('/dist/vendor/')); });