Ember.JS ember-cli ऐप में बूटस्ट्रैप लाइब्रेरी को शामिल करने का अनुशंसित तरीका


80

मैं अपने मौजूदा एम्बर-क्ली प्रोजेक्ट में ठीक से ट्विटर बूटस्ट्रैप स्थापित करने की कोशिश कर रहा हूं। मैंने bower के साथ बूटस्ट्रैप स्थापित किया है:

bower install --save bootstrap

अब लाइब्रेरी / वेंडर / बूटस्ट्रैप / डिस्ट / (css | js। फोंट) में डाउनलाइड किया गया है। मैंने कोशिश की है कि यहाँ क्या उल्लेख किया गया है: http://ember-cli.com/#managing-d dependencies को पथ और css फ़ाइलों के नाम बदलने की जगह है लेकिन मुझे मिलता है Brocfile.js फ़ाइल के बारे में त्रुटियाँ । मुझे लगता है कि उदाहरण के मुकाबले ब्रोफाइल प्रारूप बहुत अधिक बदल गया है।

मैंने / app / स्टाइल / निर्देशिका में स्टाइलशीट को स्थानांतरित करने के बाद /app/styles/app.css फ़ाइल के साथ @import करने की कोशिश की :

@import url('/assets/bootstrap.css');
@import url('/assets/bootstrap-theme.css');

लेकिन यह काम नहीं आया। फ़ाइलें दृश्यमान देव सर्वर हैं:http://localhost:4200/assets/bootstrap.css

क्या कोई मुझे यहां हड्डी फेंक सकता है?

धन्यवाद

संपादित करें:

ember -v
ember-cli 0.0.23

brocfile.js

    /* global require, module */

var uglifyJavaScript = require('broccoli-uglify-js');
var replace = require('broccoli-replace');
var compileES6 = require('broccoli-es6-concatenator');
var validateES6 = require('broccoli-es6-import-validate');
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');

var env = require('broccoli-env').getEnv();
var getEnvJSON = require('./config/environment');

var p = require('ember-cli/lib/preprocessors');
var preprocessCss = p.preprocessCss;
var preprocessTemplates = p.preprocessTemplates;
var preprocessJs = p.preprocessJs;

module.exports = function (broccoli) {

  var prefix = 'caisse';
  var rootURL = '/';

  // index.html

  var indexHTML = pickFiles('app', {
    srcDir: '/',
    files: ['index.html'],
    destDir: '/'
  });

  indexHTML = replace(indexHTML, {
    files: ['index.html'],
    patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
  });

  // sourceTrees, appAndDependencies for CSS and JavaScript

  var app = pickFiles('app', {
    srcDir: '/',
    destDir: prefix
  });

  app = preprocessTemplates(app);

  var config = pickFiles('config', { // Don't pick anything, just watch config folder
    srcDir: '/',
    files: [],
    destDir: '/'
  });

  var sourceTrees = [app, config, 'vendor'].concat(broccoli.bowerTrees());
  var appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });

  // JavaScript

  var legacyFilesToAppend = [
    'jquery.js',
    'handlebars.js',
    'ember.js',
    'ic-ajax/dist/named-amd/main.js',
    'ember-data.js',
    'ember-resolver.js',
    'ember-shim.js',
    'bootstrap/dist/js/bootstrap.js'
  ];

  var applicationJs = preprocessJs(appAndDependencies, '/', prefix);

  applicationJs = compileES6(applicationJs, {
    loaderFile: 'loader/loader.js',
    ignoredModules: [
      'ember/resolver',
      'ic-ajax'
    ],
    inputFiles: [
      prefix + '/**/*.js'
    ],
    legacyFilesToAppend: legacyFilesToAppend,
    wrapInEval: env !== 'production',
    outputFile: '/assets/app.js'
  });

  if (env === 'production') {
    applicationJs = uglifyJavaScript(applicationJs, {
      mangle: false,
      compress: false
    });
  }

  // Styles

  var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');

  // Bootstrap Style integration
  var bootstrap = pickFiles('vendor', {
    srcDir: '/bootstrap/dist/css',
    files: [
      'bootstrap.css',
      'bootstrap-theme.css'
    ],
    destDir: '/assets/'
  });

//var bootstrap = preprocessCss(appAndDependencies, '/vendor/bootstrap/dist/css', '/assets');

  // Ouput

  var outputTrees = [
    indexHTML,
    applicationJs,
    'public',
    styles,
    bootstrap
  ];

  // Testing

  if (env !== 'production') {

    var tests = pickFiles('tests', {
      srcDir: '/',
      destDir: prefix + '/tests'
    });

    var testsIndexHTML = pickFiles('tests', {
      srcDir: '/',
      files: ['index.html'],
      destDir: '/tests'
    });

    var qunitStyles = pickFiles('vendor', {
      srcDir: '/qunit/qunit',
      files: ['qunit.css'],
      destDir: '/assets/'
    });

    testsIndexHTML = replace(testsIndexHTML, {
      files: ['tests/index.html'],
      patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
    });

    tests = preprocessTemplates(tests);

    sourceTrees = [tests, 'vendor'].concat(broccoli.bowerTrees());
    appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });

    var testsJs = preprocessJs(appAndDependencies, '/', prefix);

    var validatedJs = validateES6(mergeTrees([app, tests]), {
      whitelist: {
        'ember/resolver': ['default'],
        'ember-qunit': [
          'globalize',
          'moduleFor',
          'moduleForComponent',
          'moduleForModel',
          'test',
          'setResolver'
        ]
      }
    });

    var legacyTestFiles = [
      'qunit/qunit/qunit.js',
      'qunit-shim.js',
      'ember-qunit/dist/named-amd/main.js'
    ];

    legacyFilesToAppend = legacyFilesToAppend.concat(legacyTestFiles);

    testsJs = compileES6(testsJs, {
      // Temporary workaround for
      // https://github.com/joliss/broccoli-es6-concatenator/issues/9
      loaderFile: '_loader.js',
      ignoredModules: [
        'ember/resolver',
        'ember-qunit'
      ],
      inputFiles: [
        prefix + '/**/*.js'
      ],
      legacyFilesToAppend: legacyFilesToAppend,

      wrapInEval: true,
      outputFile: '/assets/tests.js'
    });

    var testsTrees = [qunitStyles, testsIndexHTML, validatedJs, testsJs];
    outputTrees = outputTrees.concat(testsTrees);
  }

  return mergeTrees(outputTrees, { overwrite: true });
};

क्या आप अपना अंगारा-क्लाई संस्करण और Brocfile.js सामग्री दिखा सकते हैं?
मार्सियो जूनियर

इसके अलावा इंडेक्स। के माध्यम से सहित / शैलियों में कॉपी करने के बाद काम किया। <लिंक rel = "स्टाइलशीट" href = "एसेट्स / बूटस्ट्रैप.css"> <लिंक rel = "स्टाइलशीट" href = "एसेट्स / बूटस्ट्रैप-थीम.कस">
दिशा

जवाबों:


39

आप एम्बर-बूटस्ट्रैप की जांच करना चाहते हैं , जो बूटस्ट्रैप परिसंपत्तियों को स्वचालित रूप से आयात करेगा।

ember install ember-bootstrap

इसके अलावा यह आपके ऐप में देशी एम्बर घटकों का एक सूट जोड़ता है, जो कि बूटस्ट्रैप सुविधाओं के साथ एम्बर में काम करना आसान बनाता है। इसकी जाँच करें, हालाँकि मैं थोड़ा पक्षपाती हूँ, क्योंकि मैं इसका लेखक हूँ! ;)


1
यह कमांड किसी भी मौजूदा एम्बर प्रोजेक्ट को बूटस्ट्रैप में बदलने के लिए पर्याप्त है। धन्यवाद साइमन।
राजा नागेंद्र कुमार

एम्बर-बूटस्ट्रैप उत्कृष्ट है! हालाँकि इसमें से एक गायब घटक हिंडोला है। यदि आपको हिंडोला को काम करने की आवश्यकता है, तो आपको बूटस्ट्रैप घटकों को @rastapasta निर्देशों के माध्यम से स्थापित करने की आवश्यकता होगी - ऐसा प्रतीत होता है कि एम्बर-बूटस्ट्रैप में ट्रांज़िशन शामिल नहीं है। बूटस्ट्रैप परिसंपत्तियों के एक हिस्से के रूप में जेएस शामिल हैं, जो आपको लाता है और यह है हिंडोला के लिए आवश्यक है।
रयाननर्ड

@RyanNerd धन्यवाद! हां, हिंडोला अभी भी लापता है। लेकिन आगामी 1.0 रिलीज के कुछ समय बाद ही उम्मीद की जानी चाहिए!
साइमन इहमिग

68

दे घुमा के:

bower install --save bootstrap

Brocfile.js:

app.import('vendor/bootstrap/dist/js/bootstrap.js');
app.import('vendor/bootstrap/dist/css/bootstrap.css');

JS को app.js में जोड़ा जाएगा, जो कि डिफ़ॉल्ट रूप से जुड़ा हुआ है, और CSS को जोड़ा जाएगा assets/vendor.css, जो 14 मई तक डिफ़ॉल्ट रूप से जोड़ा जाता है।

संदर्भ के लिए: http://www.ember-cli.com/#managing-d dependencies

फोंट और अन्य परिसंपत्तियों के आसपास जो के सवाल के जवाब में, मुझे फोंट पर काम करने के लिए अनुशंसित ऐप.पोर्ट () विधि प्राप्त करने में असमर्थ था। मैंने इसके बजाय मर्ज-ट्री और स्टेटिक-कंपाइलर दृष्टिकोण का विकल्प चुना:

var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var extraAssets = pickFiles('vendor/bootstrap/dist/fonts',{
    srcDir: '/', 
    files: ['**/*'],
    destDir: '/fonts'
});

module.exports = mergeTrees([app.toTree(), extraAssets]);

9
और सर्वर को फिर से शुरू करें क्योंकि ब्रोफाइल में परिवर्तन लिवरेलैड द्वारा स्वचालित रूप से नहीं उठाया जाएगा ... मुझे लगता है :)
अधिकतम

7
यदि आप ember-cli v0.0.35 या नए का उपयोग कर रहे हैं, तो आपको अपने पैकेज में ब्रोकोली प्लगइन्स के एक जोड़े को शामिल करने की आवश्यकता हो सकती है। json। आप उन्हें इसके माध्यम से जोड़ सकते हैं: npm install --save-dev broccoli-merge-treesऔर npm install --save-dev broccoli-static-compiler
सीन ओ'हारा

5
ध्यान दें कि अब 'वेंडर' को 'बोवर_काउंटर' से बदल दिया गया है, जो बोवर के साथ स्थापित है। 'विक्रेता' फ़ोल्डर अभी भी उपयोगकर्ता द्वारा निर्दिष्ट पुस्तकालयों के लिए इस्तेमाल किया जा सकता है।
सीन

6
तुम भी फोंट आयात कर सकते हैं के साथ app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });नीचे दिए गए लिंक की जाँच करें miguelcamba.com/blog/2014/08/10/...
जोस एस

3
ऐसा लगता है कि मेरी जनरेट की गई परियोजना ने रिस्ट्रैप.चेकमैप के रूप में अच्छी तरह से अनुरोध किया था, इसलिए मैंने नीचे भी कोड की लाइन जोड़ी। app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' });
consideRatio

45

दे घुमा के:

bower install --save bootstrap

Brocfile.js:

/* global require, module */

...


app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', {
    destDir: 'assets'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', {
    destDir: 'fonts'
});

app.import('bower_components/bootstrap/dist/js/bootstrap.js');

module.exports = app.toTree();

यह एम्बर 1.9 के लिए एक अच्छा तरीका है जब तक कि एम्बर-क्लि-बूटस्ट्रैप को हैंडलबार> = 2.0 के लिए बनाने के लिए टकराया नहीं जाता है
genkilabs

2
ड्रू के उत्तर पर एक टिप्पणी में शॉन ओ'हारा ने जो आदेश दिए, उन्हें इसमें जोड़ा जाना चाहिए:npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler
टिमो

@TimoLehto इस ब्रोक इंपोर्ट पर क्लि को क्या फायदा होता है?
सुपरब्यूपरडू

@SuperUberDuper, सैट मेट। मुझे सवाल समझ में नहीं आया। क्या क्ली? तुम्हारी किस बारे में बोलने की इच्छा थी?
तिमो

@genkilabs ने क्ली-बूटस्ट्रैप के बिंदु को नहीं देखा, इसका आसान ऊपर दिखाया गया है
SuperUberDuper

23

अपडेट ३/३०/१५

प्लस ça परिवर्तन ... मैं अब एम्बर-क्लि-बूटस्ट्रैप-सैसी का उपयोग करता हूं , यह न्यूनतम क्रेफ़्ट के साथ लाता है, जबकि अभी भी मुझे बूटस्ट्रैप के चर को अनुकूलित करने देता है।


1/22/15 अपडेट करें

मूल रूप से मेरे द्वारा बताए गए परिवाद के बजाय आपको शायद जॉनी के समाधान का उपयोग करना चाहिए। मुझे एम्बर-क्लि-बूटस्ट्रैप-सैस भी पसंद है , क्योंकि मैं सीधे अपने प्रोजेक्ट में बूटस्ट्रैप के चर को अनुकूलित कर सकता हूं।

मूल 7/11/14

यदि आप addons (0.35+, मुझे विश्वास है) का समर्थन करने वाले एम्बर-क्ली के संस्करण का उपयोग कर रहे हैं, तो आप अब एम्बर-क्लि-बूटस्ट्रैप पैकेज का उपयोग कर सकते हैं । अपने ऐप की जड़ से,

npm install --save-dev ember-cli-bootstrap

बस!

नोट: जैसा कि @poweratom बताते हैं, ember-cli-bootstrapकिसी और की लाइब्रेरी है जो बूटस्ट्रैप-फॉर-एम्बर को भी चुनता है । इस प्रकार, यह एफबीआई आधिकारिक बूटस्ट्रैप संस्करण के साथ सिंक से बाहर निकल सकता है। हालाँकि, मुझे अभी भी एक नई परियोजना पर तेजी से प्रोटोटाइप प्राप्त करने का एक शानदार तरीका मिल गया है!


2
वर्तमान को अपने वर्तमान संस्करण में बदलें। वर्तमान में आज (0.0.39) शायद वह संस्करण भी नहीं है जिसका आप उपयोग कर रहे हैं ...
याकूब वैन लिंगन

अभी के लिए ember-cli-बूटस्ट्रैप में bootstrap.js शामिल नहीं है, इसलिए आप अंतर्निहित जावास्क्रिप्ट विधियों, या विभिन्न प्लगइन्स का उपयोग करना चाहते हैं।
कोवि

2
मुझे यकीन नहीं है कि यह एक "अनुशंसित" तरीका होना चाहिए ताकि इसे प्रति स्थापित किया जा सके। 'एम्बर-क्लि-बूटस्ट्रैप' परियोजना 'बूटस्ट्रैप-फॉर-एम्बर' परियोजना पर निर्भर करती है। दुर्भाग्य से, बाद की परियोजना के अनुरक्षक के अनुसार, उन्होंने घोषणा की कि वह अब इसके उत्तराधिकारी के रूप में 'एम्बर-घटकों' परियोजना पर काम कर रहे हैं। इसलिए जब तक कि उसे छोड़ने का प्रयास नहीं किया जाता है, तब तक वह परियोजना छोड़ रहा है (वर्तमान में बूटस्ट्रैप 3.0.0 मेरा मानना ​​है कि परियोजना का उपयोग किया जा रहा है), बूटस्ट्रैप संस्करण जल्द ही बासी हो जाएगा (पहले से ही)।
23

15
$> bower install --save bootstrap

बाद में अपने एम्बर-cli-buildds.js (या Brocfile.js पर दो लाइनें जोड़ें अगर आप Ember.js के पुराने संस्करण का उपयोग कर रहे हैं):

app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');

और आवाज, जाने के लिए तैयार!

अद्यतन 08/18/2015: Ember.js 1.13 में शुरू की गई नई योजना के लिए अनुकूलित


1
Ember-cli के नवीनतम संस्करण में brocfile.js को शामिल नहीं किया गया है
Mad वैज्ञानिक

5
@MadScientist, आप आयात करने के लिए 'ember-cli-build.js' का उपयोग कर सकते हैं, अभी भी ऊपर दिए गए काम। (एम्बर: 1.12.6)
एलन फ्रांसिस

आप बूटस्ट्रैप के साथ इस दृष्टिकोण को कैसे जोड़ते हैं जैसे bootswatch.com/flatly
बेंजामिन उडिंक दस केट

5

यह है कि मैं कैसे ब्रोकर के साथ विक्रेता फाइल सीएसएस फाइल करता हूं (जो एम्बर-क्ली को कम करता है)।

 var vendorCss = concat('vendor', {
   inputFiles: [
     'pikaday/css/pikaday.css'
   , 'nvd3/nv.d3.css'
   , 'semantic-ui/build/packaged/css/semantic.css'
   ]
  , outputFile: '/assets/css/vendor.css'
  });

जहाँ vendorफ़ोल्डर है जहाँ मेरे Bower संकुल रहते हैं। और assetsजहाँ मैं अपने CSS जीने की उम्मीद कर रहा हूँ। मुझे लगता है कि आपने बोवर का उपयोग करके बूटस्ट्रैप स्थापित किया है, जो एम्बर-क्ली रास्ता है।

फिर मेरे index.html में, मैं बस उस vendor.cssफ़ाइल को संदर्भित कर रहा हूँ :

  <link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">

चीयर्स।


मैंने इसकी कोशिश की लेकिन यह मुझे बताता है कि ब्रोकोली में कॉनफैट अपरिभाषित है (संदर्भ: संक्षिप्त: कॉनट्रैट परिभाषित नहीं है) मैंने कहा कि फ़ाइल में स्टाइलशीट को शामिल करने के लिए केवल पथ बदलने के साथ: ऐप फ़ोल्डर की जड़ में Brocfile.js।
गाईडलाइट

1
प्लगइन स्थापित करें npm install broccoli-concat --saveफिर अपने Brocfile में, शीर्ष पर:var concat = require('broccoli-concat');
जॉनी हॉल

5

यदि आप SASS (संभवतः के माध्यम से ember-cli-sass) का उपयोग कर रहे हैं , bower_componentsतो स्वचालित रूप से लुकअप पथ में जोड़ दिया जाता है। इसका मतलब है कि आप बस Bower का उपयोग कर सकते हैं और पूरी तरह से Brocfile / ember-cli-build फ़ाइल से बच सकते हैं।

बावर के साथ बूटस्ट्रैप का आधिकारिक SASS संस्करण स्थापित करें

bower install --save bootstrap-sass

तो में आयात आयात करें app.scss। इसके बारे में अच्छी बात यह है कि आप बूटस्ट्रैप आयात करने से पहले चर को अनुकूलित कर सकते हैं:

$brand-primary: 'purple';

@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

या $ एम्बर इंस्टॉल करें एम्बर-क्ली-एसएएस $ एम्बर इंस्टॉल करें एम्बर-क्लि-बूटस्ट्रैप-sassy फिर app.scs का नाम बदलें और इस लाइन को इसमें जोड़ें: @import "bootstrap
rmcsharry

3
bower install --save bootstrap

अपने में brocfile.js:

app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.css');

मुझे नहीं पता कि यह वास्तव में नीचे क्यों चिह्नित किया गया था। यह बहुत स्पष्ट नहीं हो सकता है जब तक आप नहीं जानते कि इन बयानों को कहां रखा जाए। लेकिन यह ठीक काम करता है ... शायद ऐड-ऑन के रूप में अच्छा नहीं है। वे ember-cli-build.jsफ़ाइल में जाते हैं और अगर किसी को इसकी आवश्यकता होती है तो वह ठीक काम करता है। मैं Asp.Net MVC परियोजना के रूप में अपने अंगारे को खिला रहा हूं और इसे केवल उस परियोजना को उपलब्ध करने की आवश्यकता है जो केवल अंगारा ऐप नहीं है।
हल

0

टर्मिनल पर (नोड पैकेज मैनेजर का उपयोग करने वालों के लिए)

npm install bootstrap --save

अपने स्थापित बूटस्ट्रैप को आयात करने के लिए, एम्बर-क्ली का उपयोग करना

ember-cli-build.jsफ़ाइल खोलें

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });
app.import('node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('node_modules/bootstrap/dist/js/bootstrap.min.js');

अगर बूटस्ट्रैप एनपीएम इंस्टॉलर के माध्यम से स्थापित किया गया है तो वह इसे करेगा।

यह मत करो:

app.import('./node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('./node_modules/bootstrap/dist/js/bootstrap.min.js');
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.