天道酬勤,学无止境

babeljs

Webpack breaking in IE11

It's difficult to track this down, so thanks for bearing with me. Some users were complaining that our site was broken in IE11. The app is using nextjs 3.0.1 and webpack 2.7.0. Debugging in development mode I think I have an issue similar to Angular RxJs timer pausing on IE11. I'm getting an error from a reference called webpack///webpack bootstrapxxxxxxxxxx (where the x's are some numbers in hex) in IE11. Here's the function that's causing the issue: // The require function function __webpack_require__(moduleId) { // Check if module is in cache if(installedModules[moduleId]) { return

2022-01-18 22:16:33    分类:问答    javascript   webpack   ecmascript-6   babeljs   nextjs

Add flow to compilation step on create-react-app project

I'm working on a project with create-react-app and would like to add Flow to my process. The official documentation explains how to do this and it's relatively straightforward, but following their instructions it adds it alongside the built in linting/building/compilation that the app does on its own. Based on my understanding, any time I save or make a change to my application code, ESLint is running a style check on my code, Babel is transpiling my ES6 to ES5 JavaScript, and my JSX is being transpiled into JS. I would simply like to add Flow typechecking to that process. How can I configure

2022-01-18 02:44:47    分类:问答    webpack   eslint   babeljs   flowtype   create-react-app

What is the correct syntax for importing JSNLog using ES6?

I can't seem to figure out how to import JSNLog into my ES6 (babel) based Aurelia project. I've tried: import 'jsnlog'; // JL is undefined import JL from 'jsnlog'; // JL is {} import {JL} from 'jsnlog'; // JL is undefined If it matters I've learned that the jsnlog.js file is generated from typescript source.

2022-01-18 00:03:24    分类:问答    javascript   ecmascript-6   babeljs   systemjs   jsnlog

ReactJS with Fetch on older browsers

I am implementing React JS, with Webpack and Babel. However, I am having trouble getting Fetch to work with IE 11. I have the following in my .babelrc file: { "presets" : ["env", "stage-0", "react"] } and the following in my webpack.config.js file: var webpack = require('webpack'); var path = require('path'); var DIST_DIR = path.resolve(__dirname, 'dist'); var SRC_DIR = path.resolve(__dirname, 'src'); var config = { entry: { bundle: [ 'babel-polyfill', SRC_DIR + '/app/index.js', ] }, output: { path: DIST_DIR + '/public/js', filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx?$/

2022-01-17 22:58:30    分类:问答    javascript   reactjs   webpack   fetch   babeljs

SyntaxError on spread operator, while using babel env preset

I am trying to "modernize" mern.io starter bolerplate by replacing babel es2015 and stage-0 presets with env. However, it seems that env preset does not recognize the following snippet in client/modules/Intl/IntlReducer.js:9: import { enabledLanguages, localizationData } from '../../../Intl/setup'; import { SWITCH_LANGUAGE } from './IntlActions'; const initLocale = global.navigator && global.navigator.language || 'en'; const initialState = { locale: initLocale, enabledLanguages, ...(localizationData[initLocale] || {}), // ^ // SyntaxError: client/modules/Intl/IntlReducer.js: Unexpected token }

2022-01-17 19:31:14    分类:问答    javascript   ecmascript-6   babeljs

webpack 4 : bundle js not found

I recently upgraded to webpack 4. The page is getting loaded successfully and whenever changes happened it refreshes the page automatically using webpack-dev-server. It does very nice but in the console it shows below error GET http://localhost:8090/build/bundle.js 404 (Not Found) And some times when ever there is id in the URL it appends the id to bundle js url like below http://localhost:8090/16/build/bundle.js I tried many ways with Stack Overflow answers and GitHub solutions but none of them working for me. Below are module details "webpack": "^4.15.0", "webpack-cli": "^3.0.8", "webpack

2022-01-17 18:33:48    分类:问答    reactjs   webpack-dev-server   babeljs   webpack-4   babel-loader

Using Gulp-babel and getting "Argument name clash in strict mode"

I'm trying to use gulp-babel so I can start writing some ES6 / ES2015 code inside of my ES5 app. var gulp = require('gulp'), gutil = require('gulp-util'), gulpif = require('gulp-if'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), sass = require('gulp-ruby-sass'), streamqueue = require('streamqueue'), sourcemaps = require('gulp-sourcemaps'), templateCache = require('gulp-angular-templatecache'), htmlReplace = require('gulp-html-replace'), runSequence = require('run-sequence'), stripDebug = require('gulp-strip-debug'), del = require('del'), es = require('event-stream')

2022-01-17 15:10:08    分类:问答    javascript   gulp   ecmascript-6   babeljs   gulp-babel

ES6 - Using babel/traceur with jQuery plugins

I want to be able to write ES6 with jQuery plugins and compile the code down to ES5 using Gulp Babel, without having to use Browserify to make them work. For example, I may have a class like this: import $ from 'jquery'; import somePlugin from 'somePlugin'; class myClass { constructor(options) { this.defaults = { $body: $('body') }; this.options = $.extend(this.defaults, options); $body.somePlugin(); } } I can get this to work if I use Babelify but I'd prefer to find a way where I do not have to depend on another process. When I just use Babel, I get this error in the console: Uncaught

2022-01-17 12:33:24    分类:问答    javascript   jquery   gulp   ecmascript-6   babeljs

How to configure babel correctly to use lodash-es?

I need to use lodash-es in my project, but I can't configure my babel correctly, it always reports errors like SyntaxError: Unexpected identifier hello.js import upperCase from 'lodash-es/upperCase' console.log(upperCase('lodash-es')); package.json { "scripts": { "demo": "babel-node hello" }, "devDependencies": { "@babel/cli": "^7.0.0", "@babel/core": "^7.0.0", "@babel/node": "^7.0.0", "@babel/preset-env": "^7.0.0" }, "dependencies": { "lodash-es": "4.17.11" } } .babelrc { "presets": [ "@babel/preset-env" ] } When run babel-node hello, it reports error like: > /javascript-babel-node-use-lodash

2022-01-17 11:38:31    分类:问答    javascript   babeljs   babel-node   lodash

Babel/RequireJS + typeof "RangeError: Maximum call stack size exceeded"

I have a very basic JS error and I'm quite ashamed to not be able to solve it... I'm developping with ES6 and Babel and I'm making some experiments. Please note I'm using these arguments with Babel: --presets es2015 --plugins transform-es2015-modules-amd I have a simple module: "use strict"; export default class Inspector { static inspect() { console.log(this.prototype.myMethod); console.log(typeof this.prototype.myMethod); } } I use this module like that: "use strict"; import Inspector from "inspector"; class Child extends Inspector { myMethod() { console.log(`Hello from ${this.name}`); } }

2022-01-17 04:10:28    分类:问答    javascript   requirejs   ecmascript-6   babeljs   typeof