Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Adds section for commonjs support #1989

Merged
merged 3 commits into from
Jun 7, 2017
Merged

Adds section for commonjs support #1989

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e479003
Adds section for commonjs support
Jun 5, 2017
7c54a50
remove yarn reference from 'using cjs' files
vernak2539 Jun 5, 2017
d6ea268
code review changes
Jun 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions _includes/getting-started-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,38 @@ <h3>

</div>

<h3><a name="user-content-commonjs-support" class="anchor" href="#commonjs-support"><span class="octicon octicon-link"></span></a>CommonJS Support</h3>

<p>If you use a CommonJS build system (such as <a href="https://webpack.github.io/">Webpack</a> or <a href="http://browserify.org/">Browserify</a>), we recommend only loading the controls you need. You can also load all the controls by including the npm package.</p>

<h4>Working with Browserify</h4>

<p>This should work out of the box with Browserify.</p>

<h4>Working with webpack</h4>

{% highlight js %}
npm install --save-dev imports-loader
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove --save-dev

new versions of npm save automagically

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

they "automagically" save to dependencies, not devdeps.

And I don't think we should assume as this (below) makes no illusion to force you to npm v5

  "engines": {
    "node": ">=5.8.x"
  },

// or
yarn add --dev imports-loader
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove yarn reference. npm 5 essentially is yarn. we do not reference yarn elsewhere nor plan to.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree to disagree, but done

{% endhighlight %}

{% highlight js %}
// webpack 2 config
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove reference to webpack 2

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wait, why did we remove this?
I think it makes perfect sense to document where to place the import loader (whether it's config.rules for webpack 2 or config.loaders for webpack 1). Not everyone is a webpack expert.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @RodEsp, we deleted this for the reason of being progressive. The way that the docs state it now is, "add a rule," which references webpack 2. If someone is using webpack 1, they can easily search for a backport.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got ya. Thanks @vernak2539.
I guess I like to be more explicit since I probably wouldn't have realized webpack 2 was being implied just from that "add rule" before this PR. But you're right, it's not too hard to look up.

// add as a rule to module.rule
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be added to module.rule or module.loaders?

Copy link

@RodEsp RodEsp Jun 6, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh... my bad.. webpack 2. Sorry.
Do we want to include webpack 1 instructions which would use module.loader instead though?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should push for progression. If people need to integrate with webpack 1, they can look it up?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, sounds good to me.
We need to get devtest updated to webpack 2...

{
test: /fuelux\/js\/.*\.js$/,
use: ['imports-loader?define=>false']
}
{% endhighlight %}

{% highlight js %}
// include where you need to
require('fuelux/js/checkbox')
// or
require('fuelux')
{% endhighlight %}

<div class="fu-docs-section">
<!-- Cross link to new migration page -->
<div class="fu-callout fu-callout-info">
Expand Down