External dependencies (like bootstrap) in Meteor

2020-08-22 06:22发布

问题:

Let's say I have an external dependency like Bootstrap. I'd like to import some LESS from there, because that way I can use Bootstrap mixins in my code.

Since Meteor is already compiling and concatenating all of the LESS in my tree (right?), just copying the LESS directory and then manually updating it once in a while is not a solution. In fact, with the default LESS directory, it seems every LESS source file will appear in the output twice: once because it's imported in bootstrap.less, once because of the file itself.

Is there a way to get meteor to ignore some paths? public/ sounds close; but I don't really want to serve the bootstrap repo.

Plus, that might fix it for LESS, but what's the appropriate way to handle the JS extensions in bootstrap?

回答1:

I have figured out a potential solution. Meteor wants to bundle everything in its directory... so let's put the dependencies outside of its reach :)

With the following directory structure:

.
|-- ext
|   `-- bootstrap
`-- myapp
    |-- .meteor
    `-- ...

In my LESS file, I do the following:

@BOOTSTRAP: "../../ext/bootstrap/less";
@import "@{BOOTSTRAP}/reset.less";

This still doesn't work, but I think this is attributable to a LESS bug.

Unfortunately the error message produced by Meteor is completely useless here:

[[[[[ ~/Code/igl/igl ]]]]]

Running on: http://localhost:3000/
Errors prevented startup:
Exception while bundling application:
ReferenceError: err is not defined
    at /usr/local/meteor/packages/less/package.js:33:62
    at [object Object].add_file (/usr/local/meteor/app/lib/bundler.js:193:5)
    at /usr/local/meteor/app/lib/bundler.js:97:16
    at Array.forEach (native)
    at Function.<anonymous> (/usr/local/meteor/app/lib/third/underscore.js:76:11)
    at /usr/local/meteor/app/lib/bundler.js:96:11
    at Array.forEach (native)
    at Function.<anonymous> (/usr/local/meteor/app/lib/third/underscore.js:76:11)
    at Object.add_files (/usr/local/meteor/app/lib/bundler.js:95:9)
    at [object Object].on_use (/usr/local/meteor/app/lib/packages.js:136:11)
Your application is crashing. Waiting for file change.


回答2:

From my experience, it's a bad idea to directly include the Bootstrap LESS files in a Meteor project:

  • It will make your development environment a lot slower, as many extra files need to be converted by Meteor and fetched by your browser.
  • It does not satisfy dependencies of third party packages that explicitly depend on the core bootstrap package. If you add one of those, you will end up with two bootstraps in your project.
  • Resources of packages are loaded earlier than project files. If you have an external package extending bootstrap, it's styling will be loaded before bootstrap.
  • Having to rename all imports to end with .lessimport makes it hard to keep up with newer bootstrap releases.
  • The order in which the bootstrap javascript files are loaded by Meteor (alphabetically) is incorrect, leading to Javascript errors that can only be fixed by renaming the files.

I created a shell script to generate a custom bootstrap Meteor package from either a precompiled distribution, or your own clone of the Bootstrap Git repository.

You can find it here, along with usage information: https://github.com/wojas/meteor-package-bootstrap