I was trying to inject https://github.com/valor-software/ng2-dragula to Angular2 project ruled with JSPM package manager. But when I import it main boot.js file fails to compile... The only solution I'd found before was to move the project to webpack management. Are there any other solutions?
Just Make sure you include .js files of dragula in index.html and configure the SystemJS Path Too.
<script src="/node_modules/dragula/dist/dragula.min.js"></script>
<script src="/node_modules/ng2-dragula/bundles/ng2-dragula.js"></script>
<script>
System.config({
paths:{
'dragula' : '../node_modules/dragula/dist/dragula.min.js'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
Related
My ultimate goal is to get e2e and unit code coverage for my Vue 3 app using Cypress in my CI/CD pipelines.
However, when using the following configuration in my babel.config.js I get a flood of repeated error messages that read don't know how to turn this value into a node at transformFile.next (<anonymous>) for each Vue file in my app that uses <script setup>.
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
plugins: [
['babel-plugin-istanbul', {
extension: ['.js', '.vue']
}]
],
};
package.json
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-istanbul": "^6.1.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
App.vue
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
My concern is that the plugin doesn't know how to handle Vue 3's script setup syntax.
Sadly, the only how-to guides I can find online are for Vue 2 or React apps.
https://docs.cypress.io/guides/tooling/code-coverage#Using-NYC
https://vuejsdevelopers.com/2020/07/20/code-coverage-vue-cypress/
So my question is: what can I do to get my app to transpile while using babel-plugin-istanbul and script setup?
Steps to Reproduce:
Create a new Vue 3 app with vue-cli-service
Install babel-plugin-istanbul in your dev dependencies
Configure your babel.config.js as shown above
Convert your App.vue to use <script setup>
Run npm run serve
Expected behavior:
The app transpiles with no errors
Actual behavior:
Transpilation failure with don't know how to turn this value into a node errors for App.vue.
The resolve is to use istanbul in the babel config (as given in Cypress docs).
The cause isn't apparent, without <script setup> the full name babel-plugin-istanbul works ok.
plugins: [
['istanbul', {
extension: ['.js', '.vue']
}]
],
I am solving same problem and I can point out two things:
The problem is in babel.config.js file especially with .vue extension, when you remove it works, but for me it instrument all files.
I have a feeling another problem is with CLI versions plugins. I don't have problem to run the cypress code coverage plugin with older packages.
If add extension:['.vue'] in bable.config.js configuration, getting below error.
src/pages/somefile.vue?vue&type=script&setup=true&lang=js
Module build failed (from ./node_modules/#vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
Error: src/pages/somefile.vue: don't know how to turn this value into a node
I ran into this as well. It turned out to be a bug in the istanbul-lib-instrument package, which was fixed in this PR: https://github.com/istanbuljs/istanbuljs/pull/662
If you upgrade your installed copy of istanbul-lib-instrument to 5.2.1 (i.e., npm update istanbul-lib-instrument) the issue should go away.
I want to use modules in my javascript and html. When i use systemjs with version 5, i am getting error, in github i cant see the steps to configuration. If i removed System.config from below code, at that time i getting CORS issue.
What are the package i have to use to run modules in javascript and html
How to set the configurations for latest version
<!-- <script src="node_modules/traceur/bin/traceur.js"></script>
<script src="node_modules/systemjs/dist//system.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/5.0.0/system.js"></script>
</head>
<body>
<script>
//Configuration
System.config({
'meta': {
'./js/*.js': {
format: 'esm'
}
}
});
System.import('./js/app.js');
</script>
I am getting Error : index.html:18 Uncaught TypeError: System.config is not a function. if I removed system.config i am getting Error : Unable to resolve bare specifier "js/app.js" from file:///C:/Train/ES6/systemjss/ at throwBare (system.js:184) at resolveImportMap (system.js:180) at system.js:734
I am trying to add the Facebook plugin (https://github.com/Wizcorp/phonegap-facebook-plugin) to my existing Ionic app, but I cannot get it to work.
I am currently getting the following when I include the plugin script:
Can't find variable: require
Here's the script in my markup:
<script src="cordova.js"></script>
<script src="https://cdn.rawgit.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js"></script>
If I throw in a reference to requirejs (which I'm using later in the markup for bootstrapping the Angular + RequireJS part of my app), I end up with the following error:
Module name "cordova/exec" has not been loaded yet for context: _. Use require([])
What am I doing wrong?
See the ngCordova facebook plugin document
ngCordova Facebook Plugin
enjoy the program
sample code===
first plugin install and then inject $cordovaFacebook in controller and write some code below
$scope.facebook_login = function() {
$cordovaFacebook.login(["public_profile", "email", "user_friends"])
.then(function(success) {
console.log('Arguments', arguments);
$http.get("https://graph.facebook.com/v2.2/me", {
params: {
access_token: success.authResponse.accessToken,
fields: "id,name,gender,email,birthday",
format: "json"
}
}).then(function(result) {
console.log(result);
}, function(error) {
console.log(error);
});
}, function(error) {
console.log(error);
});
}
as far as i understand you need to install this plugin on your app. I don't see in install guid ability to include it from web. It should build some things and add some settings to cordova. Have you read this instruction?
instruction on git
On the Firebug Lite website there is information on how to write an extension for Firebug Lite, but it doesn't say how to deploy that extension.
I read that deploying an extension for Firebug is like installing a plugin in Firefox. Is it gonna be the same for an extension of Firebug Lite?
You should be able to extend Firebug Lite by simply including your script on the page as shown on the Firebug Lite website:
Firebug.extend(function(FBL) { with (FBL) {
// ***********************************************************************
function PluginPanel(){};
PluginPanel.prototype = extend(Firebug.Panel,
{
name: "Plugin",
title: "Plugin",
initialize: function(){
Firebug.Panel.initialize.apply(this, arguments);
this.panelNode.innerHTML = "Hello World!";
}
});
Firebug.registerPanel(PluginPanel);
// ***********************************************************************
}});
To include your extension the code needs to be executed after Firebug Lite is loaded. E.g. this can be done by saving the code above into a file and include it via a <script> tag after including Firebug Lite:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script type="text/javascript" src="my-firebug-lite-extension.js"></script>
I'm having trouble using webpack instead of Codekit v1.9.3. I started working to move from CodeKit to Grunt and Gulp, and then learned about webpack which sounds very cool. I just can't seem to get it working correctly.
"Like Codekit" means I can:
Write javascript with the coffeescript syntax
Have all script source files and libraries minified / uglified and combined into one file
Selectively include components of the bootstrap-sass (scss) framework as needed
Maintain a small file with bootstrap customizations via sass variables, like $brand-primary
Use webpack --watch to compile both scripts and styles automatically when they are changed
End up with one css file and one script file that can be included with a stylesheet and script tag.
Codekit Project Setup
Bower resources:
I'm currently storing these globally, outside of the project:
~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets
Because CodeKit supports compass, I've got this in my config.rb file:
add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"
Project Structure
js/fancybox.js
js/main.js <-- currently the compiled js 'output' file
js/main.coffee
css/styles.css <-- currently the compiled css 'output' file
scss/styles.scss
scss/modules/_bootstrap-customizations.scss
scss/modules/_typography.scss
scss/partials/_header.scss
scss/partials/_footer.scss
Contents of styles.scss
#import "modules/bootstrap-customizations"; # local customizations
#import "bootstrap/variables";
#import "bootstrap/mixins";
... # load bootstrap files as required
#import "bootstrap/wells";
System Setup:
system: OS X 10.9
node - v0.10.32
npm - v2.1.7
zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)
node was installed with homebrew's brew install node and seems to be working fine otherwise.
What I've Tried
I've read over these pages:
http://webpack.github.io/docs/configuration.html
https://github.com/petehunt/webpack-howto
http://webpack.github.io/docs/tutorials/getting-started/
https://www.npmjs.org/package/bootstrap-sass-webpack
I've attempted to create a webpack.config.js file several times, my latest attempt was several versions of this:
module.exports = {
entry: [
"./node_modules/bootstrap-sass-webpack!./bootstrap-sass.config.js",
"./js/main.coffee"
],
output: {
path: __dirname,
filename: "main.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
Webpack Error
When I run webpack I get this:
ERROR in ./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
stdin:1: file to import not found or unreadable: "~bootstrap-sass/assets/stylesheets/bootstrap/variables
NPM Error
I get an error when attempting to npm install bootstrap-sass, and not had any luck when searching for a solution. I'm not even sure I need this module.
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "bootstrap-sass"
npm ERR! node v0.10.32
npm ERR! npm v2.1.7
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package bootstrap-sass does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer bootstrap-sass-webpack#0.0.3 wants bootstrap-sass#~3.2.0
npm ERR! Please include the following file with any support request:
npm ERR! /Users/cwd/webpack-test/npm-debug.log
Sources of Confusion
The most confusing parts of webpack for me are:
Where should things like require("bootstrap-sass-webpack") be added - is it in the webpack.config.js file, or in the js/main.js file?
Should modules like this available to webpack as soon as they are installed with npm install ?
I thought that I should do npm install webpack -g so that webpack was installed globally, and use npm install without the -g for the other modules. However, I don't see any node_modules folder being created in my project. Shouldn't there be one?
How are the search paths determined / specified for things like require("bootstrap-sass-webpack") ?
What node modules should I install to be able to do this? And what should my webpack.config.js look like?
Introduction
Webpack is mainly a JavaScript-bundler. Its "native" language is JavaScript and every other source requires a loader which transforms it to JavaScript. If you require() an html-file for example...
var template = require("./some-template.html");
...you'll need the html-loader. It turns...
<div>
<img src="./assets/img.png">
</div>
...into...
module.exports = "<div>\n <img src=\"" + require("./assets/img.png") + "\">\n</div>";
If a loader doesn't return JavaScript, it needs to be "piped" to another loader.
How to load SASS-files
Configure loaders
In order to use SASS you'll need at least the sass-loader and the css-loader. The css-loader returns a JavaScript string. If you want to import the returned JavaScript string as StyleSheet, you'll also need the style-loader.
Run npm i sass-loader css-loader style-loader --save
Now you need to apply these loaders on all files that match /\.scss$/:
// webpack.config.js
...
module: {
loaders: [
// the loaders will be applied from right to left
{ test: /\.scss$/, loader: "style!css!sass" }
]
}
...
You can also pass options to node-sass as query parameters:
{
test: /\.scss$/, loader: "style!css!sass?includePaths[]=" +
path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"
}
Since bootstrap references icons via the url() statement, the css-loader will try to include these assets into the bundle and will throw an exception otherwise. That's why you'll also need the file-loader:
// webpack.config.js
...
module: {
loaders: [
{ test: /\.scss$/, loader: "style!css!sass" },
{ test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
]
}
...
Configure entry
To include bootstrap into your bundle there are several ways. One is via the multi-entry option as you've already tried. I recommend to use a single entry where you require() your main sass-file:
// main.js
require("./main.scss");
Given that your includePaths are configured then you can do:
// main.scss
// Set the font path so that url() points to the actual file
$icon-font-path: "../../../fonts/bootstrap";
#import "bootstrap";
Please note that import statements inside scss-files are not touched by webpack because libsass has no api (yet) to provide custom resolvers.
To prevent code duplication it's also important to have a single main sass-file, because webpack compiles every sass-file individually.
With the coffee-loader installed via npm your final webpack.config.js should look like:
module.exports = {
entry: "./js/main.coffee",
output: {
path: __dirname,
filename: "main.js"
},
module: {
loaders: [
{ test: /\.scss$/, loader: "style!css!sass" },
{ test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
{ test: /\.coffee$/, loader: "coffee" }
]
}
};
Webpack globally?
It's best not to install webpack globally, because it's a dependency of your project and thus should be controlled via npm. You can use the scripts-section of your package.json:
{
...
"scripts": {
"start": "webpack --config path/to/webpack.config.js & node server.js"
}
}
Then you just need to run npm start