I noticed that gulp-babel doesn't transpile my code from node_modules, only from src folder. I have the latest version of node and npm. Here are my setup.
.babelrc
{
"presets": [
["#babel/preset-env", {
"modules": false
}]
]
}
package.json
"#babel/core": "^7.11.1",
"#babel/preset-env": "^7.11.0",
"browser-sync": "^2.26.10",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
gulpfile.js
gulp.task('compile:core', function (done) {
return gulp
.src('./node_modules/fetch-inject/dist/fetch-inject.js')
.pipe(babel())
.pipe(gulp.dest(paths.temp.js))
done();
});
// Compile JS file
gulp.task('compile:js', function (done) {
return gulp
.src('./src/js/app.js')
.pipe(babel())
.pipe(gulp.dest(paths.temp.js))
done();
});
For testing purposes I put the same code into both app.js and fetch-inject.js files. compile:core didn't transpile the code only js.
It seems because it's in node_modules folder. Any advice?
It turned out node_modules transpile only works if I use babel.config.json
Related
I have this gulp config file: (I removed some functions that do not interact with js)
const { src, dest, parallel, series, watch } = require('gulp')
const notify = require('gulp-notify')
const sourcemaps = require('gulp-sourcemaps')
const browserSync = require('browser-sync').create()
const del = require('del')
const webpackStream = require('webpack-stream')
const uglify = require('gulp-uglify-es').default
function scripts() {
return src('./src/assets/js/pages/*.js')
.pipe(
webpackStream({
mode: 'development',
output: {
filename: '[name].js',
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [['#babel/preset-env']],
},
},
},
],
},
})
)
.pipe(sourcemaps.init())
.pipe(uglify().on('error', notify.onError('')))
.pipe(sourcemaps.write('.'))
.pipe(dest('./app/assets/js'))
.pipe(browserSync.stream())
}
function watchFiles() {
browserSync.init({
server: {
baseDir: './app',
},
})
watch('./src/*.html', htmlInclude)
watch('./src/partials/**/*.html', htmlInclude)
watch('./src/assets/scss/**/*.scss', styles)
watch('./src/assets/images/**/*', imgToApp)
watch('./src/assets/svg/**.svg', svg)
watch('./src/assets/fonts/**/*', fonts)
watch('./src/assets/js/**/*.js', scripts)
watch('./src/assets/fav.ico', favIcon)
}
function favIcon() {
return src('./src/assets/fav.ico').pipe(dest('./app/assets/'))
}
function clean() {
return del(['app/*'])
}
module.exports = {
styles,
watchFiles,
default: series(
clean,
parallel(favIcon, htmlInclude, imgToApp, svg, fonts, styles, scripts),
watchFiles
),
}
So, when I try to import Pixi.js
import * as PIXI from 'pixi.js';
my js code doesn't work at all and the worst thing is that there are no errors in the console.
Also I need hsl-to-hex module in my project and I just import it and everything works
I tried this variant of importing import PIXI from 'pixi.js/dist/pixi.js';
Also tried to use some gulp plugins, but I not really understand what they do, so it didn't give any result
I am trying to use an icon from font-awesome with webpack 4 via scss.
The webconfig file looks as following:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const autoprefixer = require("autoprefixer");
module.exports = {
entry: ["./src/index.js"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true
}
}
]
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: "file-loader",
options: {
name: "style.css"
}
},
{ loader: "extract-loader" },
{
loader: "css-loader"
},
{
loader: "postcss-loader",
options: {
plugins: () => [autoprefixer({ grid: false })]
}
},
{
loader: "sass-loader",
options: {
includePaths: ["./node_modules"]
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name][hash].[ext]",
outputPath: "fonts/"
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new CopyWebpackPlugin([
{
from: "public"
}
])
]
};
I imported the scss as following:
#import "#fortawesome/fontawesome-free/scss/fontawesome.scss";
and use:
<a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
<i class="fas fa-inbox mdc-list-item__graphic"></i>Inbox
</a>
It shows:
a rectangle instead an icon. What am I doing wrong?
The fully example is on github.
I hit the same issue importing the font-awesome scss into my project, this is what worked for me.
#import "~#fortawesome/fontawesome-free/scss/fontawesome";
For anyone else running into an issue with the fonts not loading (e.g. showing the empty square glyph) despite Webpack (4) compiling and file-loader copying the fonts properly, I found an option that makes everything load as expected.
First the recommended SCSS imports with ~ node_modules path as seen in other posts:
$fa-font-path: '~#fortawesome/fontawesome-pro/webfonts';
#import '~#fortawesome/fontawesome-pro/scss/fontawesome';
#import '~#fortawesome/fontawesome-pro/scss/light';
Then you'll have the file-loader config targeting font files (above). To the file-loader options you want to add the esModule: false option. Note that this could mess with other fonts you may be importing outside of SCSS.
Basically what I discovered is the fonts would get copied, but the font file urls in the compiled CSS would show as src: url([object Module]);. By default file-loader turns the imported file into a module for convenience, but of course we don't need that for fonts here, so adding the option above fixes that.
to get font-awesome for Laravel project the next worked for me:
first i had searched 'fa-fw' in public/css. assured it is absent.
npm install --save #fortawesome/fontawesome-free - that downloaded and created files to node_modules.
add to resources/sass/app.scss
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/solid';
add to resources/sass/_variables.scss (not sure for this)
$fa-font-path: "../webfonts";
build. npm run dev
fa now in you app.css. enjoy!
I have some troubleshot with bower_components. Gulp doesn't compile bower components during build process from Nunjucks file.
It is working normally during serve process but build
Here is my gulp file:
gulp.src('app/layouts/*.njk')
.pipe(wiredep({
exclude: ['bootstrap-sass'],
ignorePath: /^(\.\.\/)*\.\./,
fileTypes: {
njk: {
block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"]([^'"]+)/gi,
css: /<link.*href=['"]([^'"]+)/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
}
}
}))
I'm trying to create a gulp task that transforms
TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map]
where the source map maps back to the original TS code.
How can I do this with gulp?
So far, I've managed to get it working from TS -> ES6 -> Babel -> ES5
// Build
gulp.task("build", ["clean"], () => {
const tsProject = ts.createProject("tsconfig.json", {});
const sourceMapOptions = {
sourceRoot: __dirname+"/src"
};
return tsProject.src()
.pipe(sourcemaps.init())
// Typescript
.pipe(tsProject())
.js
// Babel
.pipe(babel({
presets: ["es2015"],
plugins: ["transform-runtime"]
}))
// Webpack <-- ????
.pipe(webpack({})) // <-- ????
.pipe(sourcemaps.write(".", sourceMapOptions))
.pipe(gulp.dest("./dist"));
});
But have no idea how to add webpack to the mix.
Since there are still no answers, here's what I ended up doing.
I had to do it in two steps (idea from here):
Typescript -> (ES6) -> Babel -> (ES5)
Webpack to bundle
Using source-map-loader to pick up the generated source maps
/** Typescript -> ES6 -> Babel -> ES5 */
gulp.task("ts-babel", function () {
const tsconfig = {
target: "es6",
lib: ["es5", "dom"]
}
const babelconfig = {
presets: ["es2015"],
plugins: ["transform-runtime"]
}
const tsProject = ts.createProject(tsconfig);
return gulp
.src("src/**/*.ts")
.pipe(sourcemaps.init())
.pipe(tsProject())
.js
.pipe(babel(babelconfig))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("build/es5"));
})
/** Webpack bundle */
gulp.task("webpack", ["ts-babel"], function () {
const config = {
devtool: "source-map",
output: {
filename: "app.bundle.js"
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: "source-map-loader"
}
]
}
}
return gulp
.src("build/es5/**/*.js")
.pipe(webpack(config))
.pipe(gulp.dest("build/bundle"));
})
I'm trying to compile my ES6 classes into something that will work in the browser. Unfortunately, when I run gulp I get the following error
Error: Cannot find module 'IDB' from 'my-project/src'
So, just to get an idea of the project structure
my-project/
gulpfile.js
src/
app.js
IDB.js
Thats it. The files in src look like:
app.js
import IDB from 'IDB';
class View {
constructor(options) { ... }
render() { ... }
}
IDB.js
export class IDB {
constructor(options) { ... }
render() { ... }
}
Finally, my gulpfile.js looks like:
gulp.task('default', function() {
browserify('./src/app.js', { debug: true })
.transform(to5ify)
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('./build'));
});
So, for some reason it doesn't resolve dependencies. Any suggestions what might be wrong ?
In your IDB.js file change it to
export default class IDB {
constructor(options) { ... }
render() { ... }
}
That should correctly export the IDB class as the module.
And in the app.js change the import to be a relative path to the file like this:
import IDB from './IDB';