Is there a way to use ES6 and modules with PhantomJS?
I can transpile each file from ES6 to ES5 using Babel, but it's awkward to maintain parallel trees (one in ES6 and another in ES5) and write the imports to require the ES5 modules. I'm looking for a cleaner solution.
I can remove all import and export code, concatenate the modules together, transpile the result into a single file, then run in through PhantomJS, but I'd prefer to use imports and exports if possible.
I tried using Browserify with the babelify transform to transpile the ES6 dependency tree into a single ES5 file, but Browserify can't find PhantomJS-provided modules like webpage. I've tried ignoring those modules by putting in my package.json:
"browser": {
"webpage": false
}
but importing webpage returns an empty object instead of the PhantomJS module.
Is there a clean way to use ES6 modules with PhantomJS?
According to PhantomJS dev's comment on GitHub, the full support of ES6 will come with PhantomJS 2.5.
Browserify's --exclude option does what I need.
browserify --exclude webpage -t babelify script.js --outfile compiled.js
phantomjs compiled.js
That excludes webpage from the dependency tree but leaves the import in place.
Related
I'm currently building an npm component library and i'm using a rollup bundling process to compile the library for distribution. The css for the project is written using SCSS, but it also depends on Bulma, which is a css framework written in SASS.
What I would like is to be able to bundle the bulma source code along with my custom scss all into one scss file that I can then use in other projects. That way I can still benefit from the features offered by scss in those projects, such as variables and mixins for example.
I would like this to be automated during the build process so that I don't have to worry about it while developing new components. I've looked at many npm packages for bundling scss files but none of them support SASS and SCSS together. I've also tried converting my project entirely to sass but there doesn't seem to be any good support for sass bundling in general.
So for example, I may have a main.scss file that looks something like this:
#import "~bulma/bulma.sass";
#import "./utils/variables.scss";
It imports both sass and scss files together. This is something that is supported by the sass compiler, and I can compile this to a bundled css file without any issues. But there does not seem to be any support for bundling into one scss file.
The two main NPM packages that i've been attempting to use are:
scss-bundle & bundle-scss
scss-bundle is great, but it doesn't seem to have SASS support, so that's a no-go with Bulma.
As for bundle-scss I converted my project to use SASS and configured the package accordingly, here's the config is used:
{
"dest": "dist/bundle.sass",
"mask": ["src/styles/**/*.sass", "node_modules/bulma/**/*.sass"]
}
From what I can tell, this should go through all of the files in all of the subdirectories of both my styles folder and the Bulma dependency folder and compile them together into one bundle.sass file. And although I would prefer the configuration options from scss-bundle, this is essentially what I am looking for.
However it doesn't work. The package can't seem to resolve the #import statements within the SASS files. Regardless of the syntax I use. And even if it was based on syntax, I can't change Bulma's syntax. Could it be that I'm using the wrong globbing pattern in the mask option? Or does this package just not work?
So my question is, and TLDR:
Can I bundle SASS and SCSS together into one file using some NPM package?
If not, is there a simple and automated way for me to transpile SASS to SCSS and then bundle them together?
If neither of those are possible, is there a working npm SASS bundler that someone can direct me towards? Because bundle-scss does not seem to work.
Also, I am aware that I could just import Bulma separately into the project that needs it, but i'd really prefer to have it all come down together in one package.
Thanks! I hope I explained everything clearly!
I have this really simple webpack projects in with I now want to also use bulma a css framework.
I installed the package via npm i bulma and tried to include it inside my app.js-file using the following snipped unsuccessfully:
import bulma from '~bulma/bulma.sass';
I also tried using a specific sass part, which also did not work:
import bulma from '~bulma/sass/base/_all';
Can you help me get this working or maybe point me in the right direction?
You need to update your webpack config file so the sass loader also processes sass files, not only scss files.
Change this line:
test: /\.scss$/, to test: /\.(sass|scss)$/
I see repositories like bootstrap starting to include additional tags in their package.json file such as 'style' and 'less.' How can I use these tags to import assets?
package.json
{
"name": "bootstrap",
"style": "dist/css/bootstrap.css",
"sass": "scss/bootstrap.scss",
"main": "./dist/js/npm"
}
I am using ES6 modules and webpack. I want to do be able to import my stylesheets using the style tag in package.json.
Currently I am doing something like this:
my_stylesheets.less
#import "~bootstrap/dist/css/bootstrap";
which is annoying for consumers to add the path when it is available in package.json. Is there a way I can import stylesheets using the tag in package.json?
If I cannot use the tag in package.json, is there a standard way of importing stylesheets in ES6 modules?
Yes!!! Webpack treats everything as a module, including that cute little package.json in your repo.
Therefore, you simply need to require() it into your app and then access properties from that json object. (See json-loader for more info).
I often use this to import data like version number etc for my Webpack config file for bundling and versioning.
This feature is not included in webpack for now. There is an open issue about this in webpack's CSS loader repo.
There is also an SO thread on the use of the style field, and it seems that there are some npm / browserify tools that support this.
I'm looking for simple module loading for import/export es6 modules transpiled by babel.
Start with es6 source files with import/export modules for use in the browser
Statically transpile this to es5 with babel, with a config specifying whichever module transform (amd, commonjs, systemjs) is simplest to load.
Do not use npm for the modules, nor any other complex workflow. Just babel transpiled files.
Load these es5 files with modules, with a <script> to load a library that the babel transpilation used for loading es6 modules.
I'd like to avoid browserify, webpack, jspm etc. Just simple transpiled es6->es5 and using the library babel compiled modules to. I don't need bundling. We're talking simple, basic javascript here.
Is this possible? If so, how?!
All the module loading discussions I've seen use complex workflows that seem to me to be unnecessary. I'd like to simply use es6 import/export in a set of files and use them as simply as possible in the browser.
Guy Bedford answered this in the SystemJS Google Group:
https://groups.google.com/forum/?hl=en#!topic/systemjs/a7vB2YmdXp8
Here is a talk I gave on it to my team, the details are at the end:
http://backspaces.net/temp/Modules.pdf
The short version is: configure babel to have babel-plugin-transform-es2015-modules-systemjs, run your modules thru babel with just this transform unless you need more of the es6 features (Chrome is 91% complete), and have your html include:
<script src="system.js"></script>
and
<script>
System.import('lib/main');
</script>
No webpack, npm/browserify, jspm, bundling, ... or any other of the (far too) many module workflows.
It seems like you could use babel-cli to do what you want. Perhaps something like babel src --out-dir lib.
According to http://www.slant.co/topics/1089/viewpoints/1/~what-are-the-best-client-side-javascript-module-loaders~browserify#9 one of the downside of using Browserify is that:
Not all javascript libraries have an npm version
While it's not too hard to create npm package for an existing library, it means maintaining it when the library updates. While most libraries are now on npm, many client side specific libraries are not.
I don't have any experience with npm aside from knowing how to install an existing module. In light of that, what is the easiest/best way to browserify with client-side non-npm libraries?
Is there a way for me to declare a local Javascript file as a dependency, instead of looking it up through npm?
You can use local modules without problems by two ways:
1.Use a relative path to a module in require:
var myModule = require('../js/my-module');
2.Use a module name, but before, you should to add it to browser property in package.json:
package.json:
...
browser: {
my-module: './js/my-module.js'
}
app.js:
var myModule = require('my-module');
Some packages are packages with bower, these can be used with browserify by using the debowerify plugin.
For non-versioned things you can copy them to a lib directory in your project or add them as a git submodule and then configure browserify so that it can find things there too.