I'm using browserify and watchify to bundle up my script files in line with this recipe. However, when I add JSHint to the mix where it says to // Add transformation tasks to the pipeline here. the reporter throws errors and warnings on the bundle.js file.
Based on that recipe how can I add JSHint to check my JS files before bundling?
Related
I use ParcelJS to bundle my JavaScript code. I want to modify an existing plugin (say the Elm plugin) to convert some special files on the fly with our own proprietary transpiler to JavaScript.
Therefor I cannot install the plugin from teh npmjs repo via Yarn into the node_modules folder. I have the relevant plugin files (asset.js, index.js, package.json) in a local directory myplugin. How do I tell ParcelJS to use them?
If you have your plugin with a package.json in the directory myplugin you can add add it (as a dev dependency) with the following command:
yarn add ./myplugin --dev
Yarn will copy the plugin to the node_modules folder. When you have changed stuff in your plugin folder increase the version number in the plugin's package.json and run yarn upgrade.
I need some help regarding how to use the firebase-admin module.
Steps followed:
npm install -g browserify
added the script:
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script> in my html page
run browserify fireBase.js > bundle.js command in the public folder
bundle.js is empty
Module name "firebase-admin" has not been loaded yet for context: _. Use require([])
I'm trying to build a component using:
vue-cli-service build --target wc --name my-component ./src/App.vue
The outputted build js still has const and arrow functions. How can I have it transpile to commonjs for example?
I've tried using various presets in the babel config but the build result is still the same.
There is a babel.config.js file in project root (generated from vue-cli)
module.exports = {
presets: [
'#vue/app'
]
}
No errors, the build is occurring but it is not transpiling. It's almost as if the babel config is bypassed when building with target wc
A default Vue CLI project uses #vue/babel-preset-app, which uses
#babel/preset-env and the browserslist config to determine the
Polyfills needed for your project.
By default, it passes useBuiltIns: 'usage' to #babel/preset-env which
automatically detects the polyfills needed based on the language
features used in your source code. This ensures only the minimum
amount of polyfills are included in your final bundle. However, this
also means if one of your dependencies has specific requirements on
polyfills, by default Babel won't be able to detect it.
When using Vue CLI to build a library or Web Components, it is
recommended to pass useBuiltIns: false to #vue/babel-preset-app to
disable automatic polyfill injection. This ensures you don't include
unnecessary polyfills in your code, as it should be the responsibility
of the consuming app to include polyfills.
To build for CommonJS use target --library:
vue-cli-service build --target lib --name myLib [entry]
Build Targets
I am using Yarn v0.19.1 to install some dependencies. I deleted my node_modules folder completely and did a fresh yarn install.
I am trying to install the dependency leaflet using yarn add leaflet. The module installs successfully, except during the Cleaning Modules... phase, Yarn removes the images folder which would typically live within leaflet/dist/images. When I do a npm install leaflet this folder does not get removed.
During a yarn install, the images folder is present until the Cleaning modules phase happens.
Who/what is doing this? Is this something yarn does? Or is this something specified within the leaflet library? How could I resolve this?
I checked the package.json in the leaflet library and nothing seemed out of the ordinary there. It runs a jake file, but even within that file nothing is being deleted related to images.
Here is what the folder looks like, within my node_modules folder, for both package manager installs:
yarn
npm
There was a .yarnclean file in my project. This added some files/folders to ignore when installing dependencies. Running yarn clean added this file and I wasn't aware until I saw this issue. Viewing the docs also gave the same info.
I resolved this by removing images from the set of ignored directories.
Here is my .yarnclean file for an example:
# test directories
__tests__
test
tests
powered-test
# asset directories
docs
doc
website
assets
# examples
example
examples
# code coverage directories
coverage
.nyc_output
# build scripts
Makefile
Gulpfile.js
Gruntfile.js
# configs
.tern-project
.gitattributes
.editorconfig
.*ignore
.eslintrc
.jshintrc
.flowconfig
.documentup.json
.yarn-metadata.json
# misc
*.gz
*.md
I have a custom NPM module which requires other SASS based NPM modules eg Breakpoint SASS and Susy.
In my modules package.json:
"dependencies": {
"breakpoint-sass": "^2.7.0",
"susy": "^2.2.12"
}
When I was using NPM v2 the dependnacies were nested. So in my module's SASS file I could just include the dependancies with this:
#import './node_modules/breakpoint-sass/stylesheets/breakpoint';
#import './node_modules/susy/sass/susy';
However as of NPM v3 dependancies are now installed as a flat structure.
In my projct root:
node_modules/custom
node_modules/breakpoint-sass
node_modules/susy
As I'm using Gulp SASS Ive got this working in 1 project using includePaths. However as a custom build task is required my module is essentially broken. Is there a solution to this?
I considered using a naked node-sass implementation within the module which would use includePaths, but this seems like a lot of work just to resolve a path.
A separate but possibly related issue is that I have fonts in my custom module which Im importing with #font-face in my custom module's SASS file. When I import my module's SASS file into my main project's SASS file then the #font-face paths are wrong.