Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First pass at implementing webpack #6

Merged
merged 6 commits into from
Jun 22, 2018

Conversation

lindsayplatt
Copy link

@lindsayplatt lindsayplatt commented Jun 21, 2018

(this should not conflict with #5)

This PR adds the some basic publish steps, two js functions and a js file to pull them together to create some mouse-able dots on a page using the dv_stats data, adds webpack to the mix, and adds/uses d3.v5 (all modules right now so final js is 1.2 MB...). I followed @mwernimont's example at https://github.com/USGS-VIZLAB/viz-scratch/tree/master/webpack_demo and this blog https://medium.com/@svinkle/getting-started-with-webpack-and-es6-modules-c465d053d988.

We are thinking about adding the node modules to s3 and having a fetch step. I have gitignored the node_modules folder because it is HUGE! @mwernimont plans to look into how to snag just the modules we need (see #9). For now, in order to build, you are going to need to run the following:

npm install webpack --save
npm install webpack-cli --save
npm install d3

Resulting viz:
gage_conditions_gif

@mwernimont
Copy link
Contributor

mwernimont commented Jun 22, 2018

@lindsaycarr I do have a question, when you showed me you had webpack run at the end of the remake(), did you see the changes you made immediately after the build? I'm just wondering since webpack recreates the JS each time into the bundle and vizlab is already looking for the old JS file at the same time and I wanna see if we have the correct ordering of things running.

package.json Outdated
"webpack": "^4.12.0"
},
"devDependencies": {
"webpack-cli": "^3.0.8"
Copy link
Contributor

@mwernimont mwernimont Jun 22, 2018

Choose a reason for hiding this comment

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

Its odd we have webpack as a dependency and webpack-cli as only a dev dependency. We need to have both to have webpack work, so I feel a stronger solution would be to have the 2 packages in both the production dependencies and the dev dependencies. Which is super easy to do as you are installing them with node. Just simply run npm i webpack webpack-cli --save --save-dev or have them both in the production line only npm i webpack webpack-cli --save, I just don't like them split up as they currently are.

Copy link
Contributor

Choose a reason for hiding this comment

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

Not that it matters for this specific test project, just in the future let's make sure they are together.

Copy link
Author

Choose a reason for hiding this comment

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

Tried to troubleshoot a little with marty. No luck, so we created #8 for now.

@lindsayplatt
Copy link
Author

I think the order is correct because the publish step which moves dist/bundle.js into target happens after the system call to run webpack (see https://github.com/USGS-VIZLAB/gage-conditions/pull/6/files#diff-d0eb8752b11a4299633d0c40e695cf09R5). I have noticed that I need to run unpublish() before vizmake() to see changes. I think if I had the individual js files as targets and make those dependencies of the webpack step, we might be able to avoid that.

@mwernimont mwernimont merged commit 32974ee into USGS-VIZLAB:master Jun 22, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants