I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.
Related
I work in eclipse on windows.
I have a workspace containing several projects, one of which contains typescript and sass (scss) files. I had a working build chain that produced a solid output of CSS and JS files. However I created this a while back, and I never really liked the way it was set up to begin with. Now external circumstances force me to rethink this chain, and I want to rebuild it more robust.
I previously used webpack via nodejs, triggered from a package.json from inside eclipse.
I don't like this, because I dislike the idea of a build chain that depends on an ecosystem, which is difficult to upgrade safely (without a clear strategy of reverting to a stable state, in case of failure or incompatibility). This is exactly what happened to me, and why I want to leave this setup.
What I would like to have is a:
fixed version of a (preferably more atomic) transpiler that I can try to upgrade/update manually, but always know to have the old version to fall back on.
less 'messy' chain, with as few individual pieces as possible.
still maintained solution.
What I had in mind was a Maven based chain, but those approaches always seems to rely on other tools, which in turn use nodejs. I'd rather use a separate build chain to build SASS, and have a robust typescript build chain in trade.
The official TypeScript compiler is the only TypeScript compiler that provides type checking. It's a Node.js program.
Babel and some similar tools can also transpile TypeScript into JavaScript but all they do is to strip type annotations (after all TypeScript syntax is just JavaScript + some modern ECMAScript features + type annotations). It's very useful and fast for production builds but basically defeats the purpose of using TypeScript in the first place, which is presumably type checking. Besides, all of the tools of this type that I'm aware of are also Node.js programs.
What this means is that you're already going to need Node.js for the compiler itself.
Coming from mainly C/C++ programming I also disliked the idiosyncrasy of JS build tools and tried hard to avoid them. But it is what it is: You're on your own if you want to use tools like make, maven, or similar. It is also slower. TypeScript (or Babel) compiler is an in process plugin for Webpack, but it's gonna be an external command if you use a generic build system. This adds overhead and causes the compilers to do some extra work in some settings. Finally, extremely useful Webpack features like the watch mode and the dev server are not easily implementable with a traditional build system.
Besides, I don't think your objections are warranted: It is, in fact, very easy to revert an npm package to a stable state if you use version control (which you should be doing anyway) and a package-lock.json file. Then it's a simple matter of git checkout stable-branch && npm ci. Here, ci stands for "clean install" and it installs all the packages with the version numbers in package-lock.json. You can even install a checkout hook that runs npm ci when there are changes in the package-lock.json (which you should commit to your version control system).
This way, everyone in your team and every build of your application (be it your local development version, your colleagues' development versions, staging servers, or production server, or whatever) will have the exact same npm packages for a given git commit (or equivalent thereof in other version control systems).
I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine
I am beginning to use Go for web development, but I am having issues with asset management. I would prefer to have a tool like Rails' Asset Pipeline for managing (and compressing) css/js files (as well as SASS), but I am still able to work with css and js files.
While I am able to work with css and js, I am not able to work with SASS. Is there a way to use SASS in a Golang project? I am not using a framework.
Thank you!
I'm not familiar with Ruby on Rails but, I assume, that ruby on rails gave you some sort of tools for managing the source to distribution client-side asset transition (polyfills, transpiling, minification, compiling of SASS/SCSS to CSS, compiling of XScript to JavaScript ... etc).
While a web development framework might do that to try and ease in developers quickly (I assume rails does that, not ruby) its not exactly the way Go does stuff.
Go is a language, not a framework + language, just a compiler, a few build tools and a set of standards for how to write, test, document and indent stuff (with the indent,test and document part being optional).
A go server, at least the way I built servers with go, is somewhat decoupled from the client. It server static assets when they are needed (e.g. it serves the minified JavaScript and the stylsheets and the html, and jsons with info from the databases... etc), but it doesn't really care about what those are, its a server. The go toolchain is made for building golang applications (e.g. said server), but its not made for building client-side web applications (those consisting of js, css and html).
Now, you may use a framework similar to rails written in go that helps "pack up" css, js, html. But I'm unaware if there are any.
You may use a compiler which turns go into client-side code (i.e. javascript) https://github.com/gopherjs/gopherjs , if you enjoy the go toolchian and want to use it for client-side development. But, go-like performance isn't something this gives you AND you are working with a subset of go. Its really just a different way to write javascript.
However, what you most likely need in your case is a "build-chain" for your client side. Here there are 3 tools which (in my opinion) stand out in 2016:
npm
webpack
bower
I could write an essay about using this tools but here's the summary:
Webpack is used to create a "pipeline" for your code which does thing like, calling babel on javascript, compiling sass to css, minifying assets, allowing js to be written with import syntax... etc, really, its a swis army knife in your js development arsenal and probably matches the functionality of whatever you were using before.
Npm is the node package manager BUT even if you are not using node for your server. It can be useful to keep tracks of dependencies for building your application (like webpack) and for downloading modules. Its also useful for running various scripts and deployment, its a bit of an overkill to use both npm and weback though you will probably have an easier time setting up the webpack enviornment if you have a package.json (config file for npm) with each of your project.
Bower is one I actually don't use for small projects. But its basically a repository for javascript libraries (among other things), so you can easily say, write "bower install jquery" and you've downloaded jQuery for your current project.
Again, there are many other tools out there, these are just some of the ones I like, but, check some of them out. They can help you replaces your previous pipeline. Don't think of client and server side code as being the same, they are decoupled and having a strong separation between them might help you a lot.
I have a directory of assets - favicon, sitemap.xml, etc - which are not referenced by my application, but which should be collected during my webpack build. This is trivial to do with other build tools like Grunt or Gulp, but I'm absolutely stumped on how to get Webpack to do this.
One way to sort of solve this is to use copy-loader. Keep in mind that Webpack is primarily a module bundler so this use case goes beyond it. It's more than fine to use Webpack with some other tools that are better suited for copying files.
Disclaimer: I know almost nothing about servers. Sorry if this question doesn't make sense in the first place.
I'm building my project in Node.js with CoffeeScript and Stylus and some other compiled stuff. Until now I've made a script to compile my code into regular JavaScript and CSS, then run it. I'm planning to upload the compiled assets to the production server, so there's no trace of CoffeeScript or Stylus anywhere afterward.
But I know that it's possible to directly run server-side CoffeeScript (coffee app.coffee), and that there are middlewares in Node which compile and minify client-side CoffeeScript and Stylus on the fly.
My question is, why let the server do it each time, instead of compiling the code ourselves? Wouldn't the first option add more strain on the server for no reason?
Thanks.
It would not add strain on the server. An educated guess would tell me that one it compiles and minifies your CoffeeScript it caches the result for each subsequent request.
Manual processes introduce risk and probability of error.