I have the following wiredep task:
gulp.task('wiredep', function () {
log('Installing Bower Components in HTML files...)
return gulp
.src('./Views/Shared/_Layout.cshtml')
.pipe(wiredep({
bowerJson: require('./bower.json'),
directory: './bower_components/',
ignorePath: '../..'
}))
.pipe(gulp.dest('.'));
});
The goal is to convert the
<!-- bower:js -->
<!-- endbower -->
to actual JavaScripts as specified in my bower.json:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "3.0.0",
"hammer.js": "2.0.4",
"jquery": "2.1.4",
"knockout": "3.3.0"
}
}
When I run the task I get the following output:
[15:53:06] Starting 'wiredep'...
[15:53:06] Installing Bower Components in HTML files...
events.js:72
throw er; // Unhandled 'error' event
^
Error: Error: bootstrap is not installed. Try running `bower install` or remove the component from your bower.json file
I do see the packages in wwwroot/lib, so I think Bower is actually installing it.
Can anyone help me solve this?
this part of your script:
directory: './bower_components/',
is using the wrong path /bower_components/ is the default install folder for bower components (actually in beta 4 VS 2015 RC it used to put files there) but in the latest VS project template there is a file .bowerrc in the root of the app that tells it to put bower components under wwwroot/lib instead of the default folder name. so directory needs to be ./wwwroot/lib/' I think.
Related
I want to setup a yarn workspace monorepo structure to my project, below is the basic structure.
Main
- packages
- Auth
- package.json
- Site1
- package.json
- Site2
- package.json
- package.json
/* Main/package.json */
{
"private": true,
"name": "Main",
"workspaces": ["./packages/*"]
}
I want to add the #Main/Auth packages dependency to #Main/Site1 and #Main/Site2. I have tried this
yarn workspace Site1 add Auth
It's giving the error:
An unexpected error occurred: "https://registry.yarnpkg.com/#Main/Auth: Not found".
PS: I have just added #Main as a prefix to make this less common.
It appears from looking at the Yarn docs, you don't issue a yarn command or anything, you just manually build the package.json files by hand.
So, inside Site/package.json you would put something like:
{
"name": "#Main/Site1",
"version": "1.0.0",
"private": true,
"dependencies": {
"#Main/Auth": "^1.0.0"
}
}
In a Laravel 6 application with Laravel-Mix 4, and using the Vue preset, I need to compile my JavaScript code to be compatible for IE11. This means adding any polyfills for missing functions, compiling out arrow functions, and so on. Out of the box, this is not done.
My test code in resources/js/app.js:
//require('./bootstrap');
let test = [1, 2, [3, 4]];
console.log(
test.flat().map((x) => 2*x)
);
With default config, laravel mix does not appear to compile JavaScript code, but only do some formatting. Comments are preserved in the compiled output.
The result of npm run dev is:
Asset Size Chunks Chunk Names
/css/app.css 0 bytes /js/app [emitted] /js/app
/js/app.js 4.95 KiB /js/app [emitted] /js/app
How do I get Laravel-Mix to use Babel to create IE11-compatible source code?
Enable Babel compilation with Laravel Mix, and use polyfills for internet explorer
Step 1: Install Corejs to get polyfills
Following the Babeljs docs for babel-preset-env 2, we first need to install core-js (which contains the polyfills):
$ npm install core-js#3 --save
Step 2: Configure .babelrc
create a .babelrc file in the project root:
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": {
"version": 3,
"proposals": false
},
"targets": {
"ie": "11"
}
}
]
]
}
Now run npm run dev and you will find polyfills inserted, arrow functions compiled out etc. - your code may just run on IE11!
Laravel-Mix, Babel, IE: Some gotchas
node_modules are not processed through babel
With the default configuration, only source code in the project itself - not its dependencies - runs through the babel compilation step. This means that any let or similar in the dependencies will trip up legacy browsers 3.
using `mix.babel' risks compiling a file twice
The laravel mix docs suggest using the mix.babel function in the Vanilla JS section 1. What this appears to do:
if no .babelrc is present, the specified file is run through babel.
if a .babelrc is present, the normal mix compilation step already uses babel. Using mix.babel causes the compilation step to be run twice.
Interestingly, the twice-compiled code does not run on IE. One problem is that it will contain require() calls for polyfills that cannot be handled:
SCRIPT5009: 'require' is undefined
This is how I managed to get our webpage to work on IE11.
I'm listing all of the packages related to Babel, though some of them are only needed to make Jest work.
package.json
"devDependencies": {
"#babel/core": "^7.10.5",
"#babel/plugin-transform-runtime": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/runtime-corejs3": "^7.10.5",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.9.0",
},
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry",
"bugfixes": true,
"targets": ">0.25%",
"corejs": {
"version": 3,
"proposals": false
}
}
]
],
"plugins": [
["#babel/plugin-transform-runtime", { "corejs": 3 }]
]
}
And finally
app.js
import './bootstrap';
import "core-js";
import Vue from 'vue';
// ...
I must say that I'm confused about the useBuiltIns property because different articles point toward different directions. It looks like if you use "useBuiltIns": "usage" you don't need to import core-js in app.js, anyway I have tried different combinations and this one is working fine.
According to the readme of core-js you need to import it, but I'm not 100% sure. Other resources that pointed me to the right directions were those two articles: https://www.valentinog.com/blog/preset-env/ and https://web.dev/serve-modern-code-to-modern-browsers/.
After this setup we only needed to update some CSS and the app was running fine. The only downside is that the vendor.js file is very heavy. I'd like to create a different bundle for browsers that support modules, but that's a different story...
Seems some use mix.babel(), but I believe that is better compatible with react. I had similar issue and I use babel-loader, #babel/preset-env and #babel/polyfill. Had to resort to polyfill cos I couldn't get core-js 3 to work following their docs. So if anyone is able to figure out how to make it work with core-js 3. I'd be glad to learn. And only install only what I seem to need for my project
Install:
npm install babel-loader #babel/preset-env #babel/polyfill --save
Webpack.mix.js
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
}
Finally, import at the begining of main/js or app/js
import '#babel/polyfill';
This has been tested on Laravel 7.x | vue 2.6
Dependencies:
"#babel/polyfill": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
Note: I decided to remove .babelrc from the root app completely, may seem like no effect but incase I need it, I prefer adding it to config.js
I have a Grunt file, that should build my CSS file. When I run the task in the Task Runner (Visual Studio), I get below error:
Running "sass:dist" (sass) task Errno::ENOENT: No such file or
directory # rb_sysopen - undefined Use --trace for backtrace.
Warning: Exited with error code 1 Use --force to continue. Aborted
due to warnings. Process terminated with code 6.
My Grunt file:
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'/css/styles.css': '/css/sass/styles.scss'
}
}
},
watch: {
css: {
files: ['css/sass/*.scss'],
tasks: ['sass'],
options: {
livereload: true,
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
My directory:
I use Visual Studio 2017 and have a standard ASP.NET Core project.
I read a bit, and it seems it could be the SASS cache. However, when I run the rm .sass-cache/ -R command, I get
rm: cannot remove '.sass-cache/': No such file or directory
Any ideas?
My guess is that there's confusion over what path you're starting from. I believe grunt runs from the project root, and wwwroot is a subfolder of that. Either prefix your paths in the grunt file with wwwroot/, or consider moving your .scss files out of wwwroot entirely, since they aren't intended to be served. They can go under the project root, and you can have grunt copy the .css outputs into wwwroot where they belong.
I'm quite new to managing assets in any other way than a direct download, and copying the required files to a designated folder and simply referencing this. However, I wish to keep my assets "close to the framework" and therefore hope to get some clarity regarding how it is done in Laravel.
I am using Laravel v5.4 and NPM v5.3.0
I want to use the Sweet Alert library and so did
npm install sweetalert
which placed the files in the node_modules directory and package.json as expected
This is where the confusion begins. I then did
npm install --no-bin-links
(the no-bin-links flag recommended for Windows hosts by the docs)
and
npm run dev
thinking this would compile/minify the library to my app.js or vendor.js (which does not exist), or at least do some magic to let me use the library.
The output states:
DONE Compiled successfully in 8551ms
which suggests to me that I have simply failed to include the Sweet Alert library in this process.
PHPStorm does suggest the library as an auto-complete option, but the application fails to load the library, stating in the JS Console on load:
jQuery.Deferred exception: swal is not defined ReferenceError: swal is not defined
I have also tried "require"-ing the library in bootstrap.js, stating:
window.swal = require('sweetalert');
or simply
swal = require('sweetalert');
Where 'sweetalert' again is suggested by the IDE autocomplete.
Here is how I attempted to use it:
$( document ).ready(function () {
alert("Hello!"); //works
swal({
title: "Hello!",
text: "Hellooo",
type: "error",
confirmButtonText: "OK THEN"
});
});
Which throws the error mentioned above.
I also tried initializing using
window.swal({...
sweetAlert({...
which fail.
What am I missing? And how are you supposed to use NPM packages in a Laravel project/what are the best practices?
Any help is greatly appreciated.
You need to add a reference to your sweetalert vendor file in your webpack.js config file.
mix.scripts('/vendor/..../sweetalert2.min.js', '/public/js/sweetalert.min.js');
That will copy it from your vendor folder to your public folder when you run
npm run dev
I have recently started using Bower (or trying to!) to manage the packages within my Laravel 4 application. The two main ones being Bootstrap and jQuery.
My footer, using Blade is:
{{HTML::script('bower_components/jquery/jquery.min.js')}}
{{HTML::script('packages/bootstrap/css/js/bootstrap.min.js')}}
The link it displays is http://localhost:8888/bower_components/jquery/jquery.min.js, which is correct.
The 'packages' folder is accessible, but it can't find a thing inside the bower_components directory. I have set the permissions to -R 755 on the bower_components directory but it still isn't accessible.
Any help would be hugely appreciated.
Looks like it is not downloading those packages.
I don't like this bower_components folder it defaults to. This is how I'm using it:
I have a .bowerrc file which tells bower where the assets should lie:
{
"directory": "public/assets/vendor"
}
I ran
bower init
And every time I bower install something:
bower install jquery -S
It downloads, installs and adds them in the bower.json file:
{
"name": "MySite",
"dependencies": {
"jquery": "~2.0.3",
"bootstrap": "~3.0.3",
"font-awesome": "~4.0.3",
"datatables": "~1.9.4"
}
}
I make sure files were downloaded and installed:
ls -la public/assets/vendor
Then I just have to create my routes using:
{{ HTML::style('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}
{{ HTML::style('assets/vendor/font-awesome/css/font-awesome.min.css') }}
{{ HTML::script('assets/vendor/jquery/jquery.min.js') }}
I don't really mind much about permissions, because files must just be readable by web server and they usually are.
I created a .bowerrc folder within the root directory and added the following code:
{
"directory": "public/bower_components"
}
I then created a bower.json using the bower init command.
Then I installed both packages, jQuery and Bootstrap and referenced them as such:
{{HTML::script('bower_components/jquery/jquery.min.js')}}
{{HTML::script('bower_components/bootstrap/dist/js/bootstrap.min.js')}}