ryanflorence / broccoli-dist-es6-module Goto Github PK
View Code? Open in Web Editor NEWAuthor in ES6, distribute everywhere.
License: MIT License
Author in ES6, distribute everywhere.
License: MIT License
I wanted to start a discussion regarding imports, multiple distribution targets, and side-effects.
Consider a library of components that you want to include in your ember-cli project. These components would be used in your application in the templates. This alone is achievable.
Import the library in the Brocfile
app.import('vendor/third-party-components/dist/named-amd/main.js', {
'third-party-components': [
'ThirdPartyComponentOne',
'ThirdPartyComponentTwo'
]
});
Then it needs to be initialized in an initializer file.
import {
ThirdPartyComponentOne,
ThirdPartyComponentTwo
} from 'third-party-components';
export default {
name: 'thirdPartyComponents',
initialize: function(container) {
container.register('component:component-one', ThirdPartyComponentOne,
container.register('component:component-two', ThirdPartyComponentTwo
}
};
Perfect. This will work. In fact we can go one step further and introduce a default initializer for people who want to quickly use everything the way we named it.
import { initializer } from 'third-party-components';
export default initializer;
This is great for people using ember-cli and named-amd.
As the author of this library of components, I want to support people who are building ember apps with globals.
To do this, I would have to change the way I am authoring my main.js file.
import {
ThirdPartyComponentOne,
ThirdPartyComponentTwo
} from 'third-party-components';
import Ember from 'ember';
Ember.Application.initializer({
name: 'thirdPartyComponents',
initialize: function(container) {
container.register('component:component-one', ThirdPartyComponentOne,
container.register('component:component-two', ThirdPartyComponentTwo
}
});
This way, when the file is imported in the Brocfile, it will automatically be initialized.
This is great for people using globals.
The problem comes when I want to support both named-amd and globals.
The globals method works by initializing on evaluation. This doesn't jive well with the import export nature of modules. The initialization then happens as a side-effect of importing. This is an issue since ember apps throw errors when the same initializer is initialized twice.
I have currently settled on an unhappy compromise favoring globals. It looks like this:
// Components are initialized as a side-effect of import
// This is necessary for exporting components for both
// Globals and named-amd support
window.console.log('HACK!', BooleanInputComponent);
The build will only pass if I use that which I am importing. However, I am actually using what I am importing simply by importing it.
So here are the questions:
Missing Broccoli global executable? Is this supposed to be globally installed as in ๐
npm install broccoli -g?
at first glance it is not clear, would it make sense just to always reject here instead?
https://github.com/rpflorence/broccoli-dist-es6-module/blob/master/lib/global-transform.js#L46
I want to browserify a node module and use it in my ES6 code, which I'm then transpiling using broccoli-dist-es6-module. I can use globals to access the node code, but that feels gross. Can you offer any suggestions/pointers on how I can do this in a nicer way?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.