|
code:
code:
|
# ? Oct 21, 2016 19:37 |
|
|
# ? May 22, 2024 06:20 |
|
spacebard posted:
Yeah, this is probably what I'm going to do. I'd considered it initially and decided against for retarded reasons I don't fully recall (something along the lines of being more elegant to have the model drive the wizard state but it ended up being anything but elegant) quote:But having properties called step1data and step2data is already suspect Lol should've been more clear, that was just a free handed example, I was trying to be generic. Its actually stuff like order.site, order.customer, etc
|
# ? Oct 21, 2016 19:55 |
|
M31 posted:
Ah thanks, this might actually clean up the current implementation enough to make it workable for now. e: M31 posted:
The wizard's state's being managed by Redux so this wouldn't be a good fit. Kekekela fucked around with this message at 20:37 on Oct 21, 2016 |
# ? Oct 21, 2016 19:58 |
|
I would break it up into two stepscode:
|
# ? Oct 21, 2016 20:17 |
|
What alternate profession do you recommend because I never understand anything in this thread and I feel I never will. I'm trying, desperately, to maybe try webpack. But even with Lumpy's examples, or this or this,I feel like everything is in Greek and I'd have better luck coding with my forehead hitting the keys. I somehow got a series of specific .js files to concatenate and minify (uglify) to one file. I'd like to get that to gzip as well but... my main issue right now is that I can't for the life of me figure out how to get a bunch of foundation .scss files to output a single, compiled, css file. Lot of commented out stuff and whatever because I've been redoing this so many times at this point code:
|
# ? Oct 21, 2016 21:04 |
|
The Merkinman posted:What alternate profession do you recommend because I never understand anything in this thread and I feel I never will. I don't think any of us really do, you just get used to it and move forward.
|
# ? Oct 21, 2016 21:19 |
|
I haven't looked in to it at all but I've heard that a major design goal of webpack 2 is to make it less like an exercise in manual obfuscation and more like something a normal human could understand.
|
# ? Oct 21, 2016 21:37 |
|
The Merkinman posted:What alternate profession do you recommend because I never understand anything in this thread and I feel I never will. I can't give you specific help, since I just sat and jacked with it until I got it working, but here's my webpack config: code:
|
# ? Oct 21, 2016 21:58 |
|
I'm kind of confused about what I'm doing wrong. As I mentioned earlier I'm trying to migrate an existing JS project to Typescript in some incremental manner. I thought my first order of business should be replacing babel with typescript. As such, I removed the babel loader and added the following as my "last" (and thus actually at index 0 in the loaders array since as just mentioned in the last post, webpack loaders work in reverse order): { test: /\.(tsx?|js)$/, loader: "ts-loader" } My tsconfig.json: JavaScript code:
code:
My guess is that this has something to do with my code using ES6-style module imports and exports maybe?
|
# ? Oct 21, 2016 22:09 |
|
shot in the dark, but it's not fixed if you add "allowSyntheticDefaultImports": true to your compilerOptions, is it? there's some weird quirk about TypeScript doing ES6 imports of CommonJS JS modules
|
# ? Oct 21, 2016 22:37 |
|
HaB posted:I can't give you specific help, since I just sat and jacked with it until I got it working, but here's my webpack config:
|
# ? Oct 24, 2016 14:26 |
|
The Merkinman posted:Also, what's the folder breakdown for that? Maybe my webpack.config.js is looking for scss in the wrong folder. The relevant parts of paths.js: code:
|
# ? Oct 24, 2016 15:44 |
|
The Merkinman posted:What alternate profession do you recommend because I never understand anything in this thread and I feel I never will. A couple clarifying questions: How are you importing / including the Foundation files in your code? Have you started with a "stupid" version that only has one .js file and the foundation stuff and does everything inline?
|
# ? Oct 24, 2016 15:45 |
|
Lumpy posted:A couple clarifying questions: currently the folder is (largely from Foundation 5 import and file names changed to protect the innocent): code:
Yes that's a giant mess, so I'm totally find with restructuring if I get this to work. I'm currently working on a "stupid" version, that's what I've posted so far. code:
|
# ? Oct 24, 2016 16:21 |
|
The Merkinman posted:currently the folder is (largely from Foundation 5 import and file names changed to protect the innocent): how are you importing your SCSS in your js?
|
# ? Oct 24, 2016 16:34 |
|
Helicity posted:I asked my new team how they felt about Gulp and all of them are frustrated with the direction it's gone (hasn't gone) since the original maintainer left the project. Out of curiosity, could you elaborate? Like, I haven't changed my gulp workflow since the thing came out so unless there's like a behind the scene thing I haven't noticed...? I mean this is annoying: code:
|
# ? Oct 24, 2016 16:35 |
|
Lumpy posted:how are you importing your SCSS in your js? Oh I see, you're saying I should have it that way in the 'stupid' version. Well I just tried can't get that to work either. I've tried the documentation, but it's rear end, and the comments are the usual FOSS "hurr durr you have a problem with the docs? improve them yourself" I can't find any documenation/tutorial on what I'm trying to do so I'm thinking I'm just not understanding the entire concept of Webpack and/or it's not suitable for the website I work on. Basically I am a 3 year old and anything anyone says might as well be written in Aramaic. I think that's my level of understanding w/r/t any front end framework more advanced that HTML4. The Merkinman fucked around with this message at 17:37 on Oct 24, 2016 |
# ? Oct 24, 2016 17:01 |
|
The Merkinman posted:I'm.. not? I want it to be a separate file with that extractext plugin. Unless your JS imports SASS, Webpack won't know it exists. Here's a semi-oversimplified "How Webpack does a thing": Let us say you have three JS files and two SASS files: code:
code:
code:
code:
entry: './fileA.js' When webpack runs, it will slurp in fileA.js. It will see the import of fileB and the use of 'Buttes' and so slurp in fileB.js. It will see the import of styleA and the use of at least one rule in it, so it will slurp in (and trasnform assuming you have the loader for it set up) styleA.scss. Since neither fileA nor fileB reference fileC, Webpack never looks at it. Since no .js files nor styleA reference styleB, Webpack never looks at it. So, unless one of the files in your entry or files they import import your Foundation scss files, Webpack does not know they exist, and that's why it's not happening.
|
# ? Oct 24, 2016 18:07 |
|
That's why I think I'm using Webpack wrong, as in, not for its intended purpose. We have a bunch of scss files compiled into one, monolithic, app.css (command line compass) We have a bunch of js files that are included on every page (command line uglifyjs) We also have some pages with one-off js files or ones used on some pages but not others We have something, not yet production ready, that uses Angular2 written in TypeScript (Gulp) We have something, that IS production ready, that uses Knockout written in TypeScript (TypeScript command) So I was looking for something to use, to do all those things at once, in a standard way rather than every developer re-inventing the wheel. From your example, it looks like Webpack is only used for a very component-based website, where every bit of functionality has its own .js and scss? As I'm working on one site, all the time, I complete site-wide rewrite all at once would be out of the question (have to do feature, feature, feature!!).
|
# ? Oct 24, 2016 18:58 |
|
The Merkinman posted:That's why I think I'm using Webpack wrong, as in, not for its intended purpose. You can still do what you're talking about with webpack, but it might be more trouble than it's worth. You can chain Gulp/Grunt tasks together into a single "build" or "dev" command. Seems like that might be the easiest way to modify your existing setup
|
# ? Oct 24, 2016 19:39 |
|
HaB posted:You can still do what you're talking about with webpack, but it might be more trouble than it's worth. When I asked way back, Lumpy suggested Webpack in the first place <>
|
# ? Oct 25, 2016 21:17 |
|
The Merkinman posted:When I asked way back, Lumpy suggested Webpack in the first place <> Welcome to web development!
|
# ? Oct 25, 2016 21:19 |
|
The Merkinman posted:When I asked way back, Lumpy suggested Webpack in the first place <> To be fair, I suggested a bunch of npm scripts as well, which seems to suit your needs much better.
|
# ? Oct 25, 2016 21:24 |
|
Cool thread, thanks for being the epitome of modern front-end development and suggesting I try to learn something that is ultimately useless for what I want to accomplish.
|
# ? Oct 25, 2016 21:33 |
|
OK. I have a problem. I write a bunch of cool web toys. I want to try out using TypeScript on one of them, because I keep making dumb type errors. My preferred workflow: in Visual Studio Code or Atom, have TypeScript. If I press F5 on the right in my browser, I should get JavaScript that is up to date. I do not care if I use Gulp, Grunt, Broccoli, or Webpack. You pick the tech stack and tell me how to set it up. I just want TypeScript automatically compiled when I change something. Maybe some nice debug integration. Go.
|
# ? Oct 26, 2016 05:21 |
|
The Merkinman posted:Cool thread, thanks for being the epitome of modern front-end development and suggesting I try to learn something that is ultimately useless for what I want to accomplish. I prefer Gulp, it can be as simple or complex as you want it, and flows nicely from a JavaScript point of view. Suspicious Dish posted:OK. I have a problem. Gulp again? You can set up a watches to run your TypeScript compile task quite effortlessly, it will run on any file change. Note: this is using gulp-typescript 2.13.6 (TypeScript 1.8), not gulp-typescript 3.0.0, which uses TypeScript 2.0, as I've not had a chance to port stuff over. code:
Skandranon fucked around with this message at 05:37 on Oct 26, 2016 |
# ? Oct 26, 2016 05:27 |
|
Suspicious Dish posted:OK. I have a problem. for applications, webpack's relatively easy! I use it (via ts-loader) for Manygolf and a couple other TypeScript apps. for libraries the question gets trickier, because you don't really want to output a bundle, you want to output a bunch of commonjs files something else can bundle, and webpack isn't built for that. i've recently used gulp for that task, but i don't love it, and have considered a broccoli-based build (though gulp is far easier to work with, so if you just want to get up and running ASAP, it's the way to go) on the editor front, i'd recommend using vs code purely because atom-typescript, last i checked, was buggy and its lead maintainer had lost interest in the project Skandranon posted:I prefer Gulp, it can be as simple or complex as you want it, and flows nicely from a JavaScript point of view. yeah, gulp would be pretty good for that use case. you could use gulp as a wrapper around webpack for one or more of those tasks (especially the Angular 2.0 application and probably the Knockout application?). webpack's really good if you have "an application" you want to build, as i mentioned above. so, like, you'd have a webpack config that builds your angular app, and one that builds your knockout app, and you could have those as npm scripts or gulp tasks. you could also use it to build that common bundle included on a lot of pages, plus smaller split bundles for your other pages - that's not hard at all to do with webpack (assuming you're using a module system!); you're just defining multiple entry points for your scss -> app.css, webpack could handle that, but it would make the most sense in the context of a single app. if those 4 different apps you have are all using the same CSS, and you only want to build it a single time, i'd recommend that be a separate gulp task abraham linksys fucked around with this message at 05:39 on Oct 26, 2016 |
# ? Oct 26, 2016 05:33 |
|
Thanks guys! I eventually figured out how to use VS Code's builtin tasks to do it for me. Now I have a simple thing ported to TypeScript, and, wow, I am loving loving this language. https://magcius.github.io/NITRO_BMD/ https://github.com/magcius/NITRO_BMD
|
# ? Oct 26, 2016 07:13 |
|
The Merkinman posted:Cool thread, thanks for being the epitome of modern front-end development and suggesting I try to learn something that is ultimately useless for what I want to accomplish. Sorry you didn't describe your environment well enough for us to give you the prefect suggestion and taking a "this is what webpack does" post a s a "you need to use it" I guess?
|
# ? Oct 26, 2016 14:07 |
|
Suspicious Dish posted:Thanks guys! I eventually figured out how to use VS Code's builtin tasks to do it for me. Now I have a simple thing ported to TypeScript, and, wow, I am loving loving this language. this is pretty much what i do for typescript. but i initialize the project with create-react-app. so vscode has a watcher that handles tsx->js (multiple output files) and create-react-app takes over from there. so theres 0 build config other than my .vscode directory, and if i ever need to actually customize my build i can 'npm run eject' and actually see the webpack config
|
# ? Oct 26, 2016 14:53 |
|
The Merkinman posted:Cool thread, thanks for being the epitome of modern front-end development and suggesting I try to learn something that is ultimately useless for what I want to accomplish. The issue is that your problem description wasn't clear enough to recognize what you needed. That's not completely your fault. All of this stuff is so complicated with fuzzy edges between problem domains that it's difficult to know what info is pertinent to provide when asking a question.
|
# ? Oct 26, 2016 15:03 |
|
Can you guys help me figure out how to mocha-test this AngularJS component's controller? Everything is in ES6, here's how we're creating components:code:
code:
code:
code:
code:
Is there a clean way to test this controller given our current setup?
|
# ? Oct 27, 2016 17:47 |
|
IAmKale posted:Can you guys help me figure out how to mocha-test this AngularJS component's controller? Everything is in ES6, here's how we're creating components: Why not have the Controller as a completely separate file, without any imports? Then you have a file which just imports the html, css, and does the component definition. This should let you then run tests against the controller object without even knowing it is an Angular Component.
|
# ? Oct 27, 2016 18:23 |
|
Skandranon posted:Why not have the Controller as a completely separate file, without any imports? Then you have a file which just imports the html, css, and does the component definition. This should let you then run tests against the controller object without even knowing it is an Angular Component. IAmKale fucked around with this message at 20:19 on Oct 27, 2016 |
# ? Oct 27, 2016 20:06 |
|
So I'm back to waste more time and feel like an idiot. I found some tutorial on Webpack (because at this point, why not?) But early on they want you to install webpack-dev-server. It won't install for me and many others due to peer dependencies. It seems the 'fix' is in version 1.15, but AFAIK, the latest stable version of Webpack is still 1.13, so what am I supposed to do? (installing webpack-dev-server locally didn't work either)
|
# ? Nov 3, 2016 17:16 |
|
The Merkinman posted:So I'm back to waste more time and feel like an idiot. I just used the Python web server because ... and live reloading drives me loving crazy anyway python -m SimpleHTTPServer in the output directory. Easy peasy
|
# ? Nov 3, 2016 17:50 |
|
Are you using a pre-existing package.json? If so maybe try starting over from scratch and install packages one at a time manually. Could be that the dev dependencies are set wrong in package.json. I've never had a problem installing webpack and webpack-dev-server (in that order). I wouldn't waste too much time on it, after you figure it out once you'll move on to using a boilerplate that you or someone else wrote that fits your needs and Just Works. Anony Mouse fucked around with this message at 00:34 on Nov 4, 2016 |
# ? Nov 4, 2016 00:27 |
|
Anony Mouse posted:Are you using a pre-existing package.json? If so maybe try starting over from scratch and install packages one at a time manually. Could be that the dev dependencies are set wrong in package.json. I've never had a problem installing webpack and webpack-dev-server (in that order). I had a problem with it using someone's boilerplate. IIRC it installed without any errors but then didn't work, but I'm on Windows so I halfway expect that out of the Node toolchain at all times.
|
# ? Nov 4, 2016 13:48 |
|
Anony Mouse posted:Are you using a pre-existing package.json? If so maybe try starting over from scratch and install packages one at a time manually. Could be that the dev dependencies are set wrong in package.json. I've never had a problem installing webpack and webpack-dev-server (in that order). code:
|
# ? Nov 4, 2016 14:00 |
|
|
# ? May 22, 2024 06:20 |
|
For the triple whammy I've been trying the whole Babel/Webpack/whatever behemoth for the first time, developing on emacs, on the Windows Linux Subsystem bash terminal. It has been... an interesting experience, but somehow after pasting in hacks and workarounds from a thousand different open Github issues it seems to mostly work. I might just stick with it and hope Microsoft eventually implements all the missing syscalls and such, since I hate working on VNs. The dream and/or nightmare of Windows for everything might be coming true. The hardest part has actually been using the native terminal, which is absolute garbage. The second hardest part is the Webpack documentation, which is merely trash.
|
# ? Nov 4, 2016 15:57 |