Is it possible to transpile using babel.transform without touching the JSX? I would like to leave the JSX in place to use an alternative JSX interpreter which is to be performed after the Babel transpilation takes place.
Normally when transpiling JSX, you'd have a configuration like
{
presets: ['es2015', 'react']
}
In your case however, you're essentially looking to leave out 'react` without causing Babel to throw a syntax error for JSX. This can be accomplished by only enabling the plugin for the parsing JSX syntax without enabling the plugin for converting JSX into JS: http://babeljs.io/docs/plugins/syntax-jsx/
{
presets: ['es2015'],
plugins: ['syntax-jsx']
}
and ensuring you install the plugin with npm install --save-dev babel-plugin-synax-jsx.
Related
Recently I stumbled upon a library for nodejs, that I want to use in a frontend project. Because the whole project is developed in ES6, the library should not be transpiled (we only develop for browsers, supporting es6). Of course, I could "browserify" manually, but because it can be a reoccurring task, I would like to use browserify without babelify or any es6 transpilation process.
If transpilation is needed later on, I'd integrate it into the whole build process, but not beforehand.
Is there any option to browserify to omit es6 to ecmascript-5.1 transpilation?
By default, browserify does not do any transpilation process, if no plugins are enabled. It turned out, that the library I wanted browserify, passed some options to browserify in its package.json:
"browserify": {
"transform": [ [ "babelify", { "presets": "es2015" } ] ]
}
this caused browserify to use the babelify plugin by default.
I'm trying to figure out if it is worthwhile moving to webpack, I am leaning towards saying no - figuring I have more important stuff to do - but I would like to see some practical examples of how to make webpack work.
So if I have the following Gulp.js task how would I do them as a webpack task?
gulp.task('subpaths', ['clean_subpaths'],function() {
//Minify and copy all JavaScript (except vendor scripts)
gulp.src(paths.subpath_scripts)
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(contextswitch())
.pipe(uglify())
.pipe(strip())
.pipe(rename(function (path) {
path.basename += timestamp;
}))
.pipe(gulp.dest('public/longcache/javascripts/subpath'));
});
So the tasks above do -
include files inside of other files for processing.
run the piped content through my own defined code - I guess in webpack
that would be run my own plugin?
uglify
remove console statements
rename the output file so it has a version.
write out to a specific location
The first item -- include files inside of other files -- is one of webpack's biggest benefits, speaking as someone coming from an all grunt/gulp workflow. Instead of managing dependencies externally (in your build tools), and having to ensure that files are combined correctly based on their runtime dependencies, with webpack your dependencies are part of the codebase, as require() expressions. You write your app as a collection of js modules and each module loads the modules it relies on; webpack understands those dependencies and bundles accordingly. If you're not already writing your js in a modular fashion, it's a big shift, but worth the effort. This is also a reflection of what webpack is meant for -- it's conceptually oriented around building a js application, not bundling some js that your site uses.
Your second item would more likely be a custom loader, which is easier to write than a custom plugin. Webpack is very extendable, throughout, but writing custom integrations is poorly documented.
Webpack's Uglify plugin will also remove console.logs, super easy.
Specifying output details is part of your basic webpack config, just a couple of options to fill in.
I'm just wading into setting up an Angular2 app and I'm not sure what is the best way to configure the index.html. I have two examples to go from: a javascript version and a typescript version. Since Angular2 is using typescript I thought the typescript version makes sense. The javascript version is coming from the new Angular2 book from Ari Lerner. Here are the 2 examples:
Typescript configuration:
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
packages: {app: {defaultExtension: 'ts'}}
});
System.import('app/app');
Javascript configuration:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/app.js')
.then(null, console.error.bind(console));
My question is which one is the best to use, and why?
Angular2 app can be written with Typescript Or ES5/ES6. While learning angular2, you must have found that angular2 website provides two kinda docs (actually three), check now if you haven't (you will be able to see Angular2 for Typescript, Angular2 for Javascript, Angular2 for Dart.
Now it is up to you for which platform you are going to write your Angular2 app.
1). If you plan to write angular2 app with typescript, obviously your targeted web browser won't understand it and so some mechanism has to convert typescript code into javascript that can be understood by targeted web-browswer. So first snippet of code means convert/transpile .ts file into .js so your browser will be to understand.
2). If you plan to write angular2 app with Javascript/ES5/ES6 then of course, second part of your question.
Suggestion: Go with first as Angular2 itself has been written in typescript from the scratch.
First, I think that there is a small mistake in the JavaScript configure:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/app'); // <------
.then(null, console.error.bind(console));
Regarding your question:
I think that first configuration (transpiling on the fly) is fine for small applications where performances dosn't matter . As a matter of fact, there are some additional processing (in the browser) to transpile the application code into something executable by the browser at the level of module loading. Such approach is fine for applications executed in plunkr.
I would say that the JavaScript configuration that leverages pre compilation of TypeScript content is more efficient since the browser directly execute module code in JavaScript (no transpiling done by the browser itself).
That said, if you want to have something really efficient (production read application), you need to package your application:
1) to precompile your TypeScript code into JavaScript
2) to gather JavaScript code into a minimum set of JS files to minimize the number of files to load
3) to minify JavaScript code to reduce its size
The first approach doesn't allow all these three points. The second approach allows precompilation and minification but you can't gather your whole application code into a single file.
To do that you need to leverage the outFile parameter of the tsc compiler. This way you will have all modules into a single file that you can minify. In this case, you don't need anymore to configure SystemJS. You need to import the main module...
These questions could give you additional hints:
How to combine (minify) compiled Angular 2 components?
Angular2 TypeScript transpiler with Minification / Uglify
I'm using pdf.js in an angular project. Building with gulp in production mode works fine, but the production build produces non-working code that fails silently without and warnings or errors, whatsoever. I never get a viewer canvas.
It turns out the problem lies not with minification, but rather with concatenation.
The dist directory of the pdfjs-dist bower package contains three files:
pdf.js
pdf.worker.js
pdf.combined.js
the bower.json file list pdf.js and pdf.worker.js, but when using gulp bower copy and concatenation you should use pdf.combined.js instead of the other two. Add an override to your projects bower.json
"overrides": {
"pdfjs-dist": {
"main": [
"build/pdf.combined.js"
]
}
}
I am using gulp-jshint with browserify. browserify will generate a lot of code that fails jshint. I have read in this answer that there is an option to set "browserify": true since JSHint 2.5.3. However, this option will be ignored by gulp-jshint.
Does anyone know how to fix this? Can I use jshint and not gulp-jshint?
Ok, I screwed up. Of course I should lint my source files, not the file that browserify generated.