With Laravel 5.5 I'm using laravel-mix to compile my assets.
However something is not clear to me: what is the difference between mix.js and mix.scripts and why would I use one instead of the other?
Mix.scripts will
...combine and minify any number of JavaScript files... This option is particularly useful for legacy projects where you don't require Webpack compilation for your JavaScript.
While mix.js will compile ES2015, bundle modules if any and also compile vue components.
Related
I'm reading the book Angular 5 Projects and have come across this sentence:
The Angular CLI uses Webpack to transpile, compile, and deploy project code.
Transpile and compilation are given in the following link
The transpile is from TypeScript to JavaScript.
What language does angular-cli compile the JavaScript code to? And is angular-cli doing both: transpile and compilation?
Thanks for the help!
Typescript must be transpiled into JavaScript using the tsc compiler, which requires some configuration.
Yes, it's doing both. When working in Angular you will using TypeScript to code in files designated as your-component.ts with the 'ts' signifying that it's a TypeScript file. Angular then takes these files and does the transpiling (conversion to another language). In this case that would be TypeScript to Javascript. Once this is done Angular uses these now created JavaScript files to communicate to the browser with.
I am trying to set up sass with Angular Dart but I'm a bit lost and couldn't find a documentation past 2016 (a good one)
I currently have the following structure:
However I cannot reference a main.css file as it is not found and if in a component I put something like this
styleUrls: ['lib/assets/sass/main.scss']
The webdev serve command fails
My pubscpec is
dependencies:
angular: ^5.0.0
angular_components: ^0.9.0
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
sass_builder: ^2.1.1
build_runner: ^0.10.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
mockito: ^3.0.0
test: ^1.3.2
I cannot figure out what's wrong and also the structure I should use
Should I put in my top component main.scss (or the compiler main.css) and do not set any other file reference or should I include it at every component? And also how can I generate this compiled file when I run webdev serve
Thanks,
Alexi
So the references for styleUrls should always be the compiled css not the Sass file. Also the Urls need to be either relative to the file, or package format. So either 'main.css' or 'package:your_project/assets/sass/main.css'
I would also suggest not having separate asset directories. I tend to find having the sass file next to the component to be easier to maintain.
AngularDart also has style encapsulation by default; meaning CSS won't leak outside of the Components by default. Given this I find it better to have the CSS local to that component and be next to that component. You'll find that is the pattern on the angular components, and gallery.
One small note on the components, and gallery. They use the pattern style.scss.css instead of style.css which breaks the convention of Sass. The reasoning behind it is so that we can quickly tell what the source of the CSS file was. Was it written by hand, or did it come from Sass. This is achieved by having different settings in the build.yaml file. I don't think you should do this for your project tho.
My asset compilation in Phoenix is taking around 20 to 60 seconds each time, and it seems to be related to adding Elm to the project. What would cause this to happen?
I figured out this was happening because I wasn't telling brunch not to use the ES6 compiler on Elm code. It was compiling Elm code to a 10,000+ line javascript file and then trying to compile that through Babel. This is fixable by either putting the Elm code in the vendor folder (which is ignored by Babel by the default Brunch settings) or telling Babel specifically to ignore the (in my case) main.js file that is the output of the Elm code compilation.
I have a Visual Studio 2015 ASP.Net Core project which uses Gulp and RequireJS. Gulp is used at compile-time, and RequireJS is used at run-time.
The typescript definitions for Gulp include the definitions for node, and this causes a definition collision with RequireJS:
TS2403 Build:Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'Require'.
Is there a way to work around this?
Manually Editing the Definitions
I don't want to manually edit the definition files as that would create maintenance problems compared to just getting them directly from NPM.
Also it wouldn't fully solve the problem as require would have the wrong type in one of the situations depending on which I commented out.
Relevant SO Questions
I found this question: Unable to use requireJS and Node's Require in the same TypeScript project.
It has an answer suggesting using CommonJS everywhere, but as I don't own the Gulp or RequireJS typings I can't change that.
Hopefully you're using two tsconfig.jsons, one for compile-time concerns and one for run-time concerns. With two configs you can explicitly choose which types to apply to each target with the types compiler option.
Issue: In a freshly generated MVC 5 web project I have the option to set Typescript's compile option to none, RequireJS, or CommonJS. This is a site-wide compile option.
In a particular view, I need to work with esri's javascript api. This api encapsulates both RequireJS and Dojo, and if I choose RequireJS as the typescript compile option, everything works fine.
If I want to use typescript anywhere else in the site I have one of two problems: either the JavaScript emitted is in RequireJS format (no RequireJS is loaded outside of the one view) or if I load RequireJS into the project, I get conflicts with the esri library.
For more background see my Blog Post
Question: Is it possible to specify individual page(s) compile using different options for JavaScript emission within Visual Studio?
One option is to break your solution into multiple projects. In one project you can configure typescript to use AMD modules.
A second option would be to turn off the compiling of typescript at build time by Visual Studio and set up a gulp or grunt task to compile your typescript. This way you can choose to compile one set of files with AMD modules and another without AMD and not have to break your solution into multiple projects.