I'm new to webpack, and am trying to get my head around how I can switch an existing project to using it (am now using React in parts of it, so it has become necessary).
The kinds of things I am uncertain about:
As the package.json contains all my server side stuff too, will it not try to compile all this into the bundle.js?
My project contains a huge number of statically served files, and also a load of EJS generated pages. What's the best method for converting everything to webpack, I'm thinking it's going to be a bit of a headache to switch everything to 'require' statements instead of tags, but I guess it's the only way of taking full advantage of the benefits of webpack? Are there any recommended methods (or even scripts that will handles these changes for me?!).
Webpack will take care of "tree shaking" for you -- that is, it will only include the modules that your entry points explicitly use, no matter what is in your package.json file.
Looks like there is some support for EJS already in Webpack. A good conversation of it is here: https://www.npmjs.com/package/ejs-simple-loader#purpose You can then transition gradually (or not at all) as need be.
1.The backend dependencies in your package.json is unrelated to your frontend stuff. You just need to indicate the correct entry points.
FYI Entry Points
2.My suggestion is that you can find one EJS loader in GitHub to solve it.
FYI Loader
Related
Anyone that can point to any documentation on howto reuse code in lit-element.
The problem now is that if I declare an element, in my case a close-button and I want to reuse it by importing it into 2 or more lit-elements, there will be an error in the browser about the close-button being declared more than once.
Understandable enough, but how do I reuse a component, I could of course move the button to a separate file and add it to the document, but then there would be dependencies on that for other components to work.
Any suggestions
If close-button self-registers itself, with a call to customElements.define('close-button', ...), then you should be able to import its defining module and not have any errors due to the module caching behavior of JS.
You must have multiple customElements.define('close-button', ...) calls, so I'd make sure that 1) it's self-registering and you're not registering it again in each component that uses it, and 2) you're using standard JS modules.
After investigating a bit more, I concluded that sharing HTML templates might be the way to do it.
I'm putting together a demo app in which I frequently add content and new React components. I have just added the component react-timeago for showing when the latest changes were made to the site. Now I want to give that component the right timestamp.
At worst, I suppose I could show the last time that the server was started. I am using webpack-dev-server locally. I haven't yet gone live with this site, but it will probably (like webpack-dev-server) be an express-based solution when I do. So one option is perhaps to do a grep on an express-generated logfile for server start entries. Solving that would solve the question to an extent. It's worth noting though that adding content would not require a restart, so this solution is perhaps not ideal. Presumably, I could use some kind of middleware (logger or otherwise) in express for this.
Another possible approach might be some kind of directory watch mechanism that records the last time a change was made. Should I somehow hook this into a redux state, for example? There are so many components available that it's difficult to know which ones to put together (with my limited experience in this area) to achieve this.
My site is a lightweight single pager and I'm loath to add any kind of datastore behind it at this stage as it seems like overkill to me.
I can also mention that I'm using webpack 2. Aside from that it's a really basic React app with a couple of components.
To summarize, I am after some way of looking for added content (eg. mp3 files) or changed code files, and getting that timestamp into my react-timeago component.
As #Joe Clay suggested, I used Webpack.DefinePlugin to fill a constant with the current time at restart. This worked fine, I added the following lines into my webpack.config.js:
var dateString = new Date().toDateString();
...
new webpack.DefinePlugin({
LAST_UPDATED: JSON.stringify(dateString)
})
And was able to access the the constant in my React component:
<div style={{marginTop:120}}>A sinewave440hz demo site.<br/>
This site was updated
<TimeAgo date={LAST_UPDATED} formatter={formatter}/>.
</div>
Recording changes in the assets could also be done at startup if the previous state of the assets was recorded somewhere.
I’m building an electron app. In it, I have a webview with a preload script. Inside said script, I’d like to use sweetalert.
I installed sweetalert with npm install --save sweetalert. Inside my script I load it with require('sweetalert') and call it with swal("Hello world!");. I now notice it doesn’t look right, as the alert is missing its required CSS file. But I’m loading it with require('sweetalert'), which is great since sweetalert can just remain in its directory inside node_modules and I don’t have to care for it, but its CSS is an integral part of it, and is not getting pulled the same way.
Now, what is the recommended way of solving this? Keep in mind I’m inside a javascript file and would like to remain that way. Do I really have to go get the CSS file and inject it in some way? And how would I do it correctly, since it is inside node_modules? After testing it, it seems like it can’t be done in this particular case due to Content Security Policy.
Either way, that seems so clunky in comparison to the require statement, it’d seem weird for a simpler solution to not be available.
You'll have to include it like you would normally do in a browser, for example in index.html. Copy it out of the module folder into your css folder if you have one and link it with the link tag. It depends on if you're using plain electron or some other boilerplate template with there is a gulp/grunt workflow on where to stick it but that's it really, electron is just a browser that's running your JS/html so it's really the exact same process. require only loads the JS module but not the styles.
if you wanted to include it dynamically you could use the same techniques as a regular browser for example (ex. document.write/create element).
I'm not familiar with sweetalert, but hopefully this helps.
Your syntax for require should be something similar to this.
var sweetalert = require('sweetalert')
You should then be able to access methods on the sweetalert object using the following syntax.
sweetalert.someMethod()
Remember requiring just returns a javascript object. Those objects usually have methods that will allow certain functionality. If you want to add sweetalert to your page, you will either need to inject it within the html, or the javascript within the sweetalert module will need to dynamically create html where the css is included. I hope that clarifies some things and helps you get a better sense of some of the inner workings.
I use npm as my build tool, by populating the scripts field with various commands for the tasks I need. I’m satisfied with the setup, except for one small detail: when building for production, I’d like for references to CSS files in <link> tags and references to JS files in <script> tags to be updated for cache busting (i.e. to be modified by appending ?random_string to the file names, or similar).
I’m using jade, in case there’s a way to do it that way that I missed.
I don’t mind if the solution busts every file, even if they weren’t changed since the last build. What I care is that it does not require me to add complex code to the website itself (like a function with this as its sole purpose); it should preferably be an external command.
So far, I haven’t been able to find an acceptable solution. I’m almost about to resort to a regex, but would really rather have a more robust solution.
Since Jade allows executing any piece of Javascript code you can append a datestring at the end of your URL as a query string which is the standard way of invalidating cached scripts:
script(src="/app.js?#{Date.now()}")
I have a CoffeeScript project (called jAddressParser) that I am hoping to turn into reusable module. Unfortunately I am not overly familiar with how to modularize CoffeeScript for such a purpose, while maintaining sensible interoperability with an existing project.
The project in question parses address strings - no short order, to be sure. However for the purpose of the project I am working on, this strategy should work and it is possible someone else may benefit from it and perhaps others may make some useful contributions. Everybody wins!
So what I have is code laid out in a directory like this:
/
README.md
LICENSE
package.json
/src
main.js
main.coffee
canada.coffee
iso3166.js
/test
/build
In an ideal world, my workflow would be like this:
Test the above javascript from the command line. I would think Node.js is the most suitable way.
Compile the files in /src to a /build/jAddressParser.js file. I would think r.js would work well for this.
When all is ready, copy the jAddressParser.js from the /build to my web project.
Include the jAddressParser in my web project with the appropriate requirejs call (i.e. it would be AMD-ready) e.g. require(['jAddressParser'], -> ...)
Since it seems I have to include the dependencies (lodash, requirejs, require-cs, XRegExp, CoffeeScript) I expect I will do this by putting specific versions in the /lib directory or by using git submodules (though submodules seems to be a bit of overkill for such a small project).
I have never created a reusable CoffeeScript module, and I was essentially unable to find a good reference on how to perform the same for a web-module (there seem to be some decent examples for projects that are node.js-only - thought I would certainly love to see a list of more). I would be quite grateful for any thoughts or references that may shed light on the viability of the proposal above, or how you yourself might go about organizing such a project?