babel | 易学教程

Blank page and “Unknown name” error in vue.esm.js (Microsoft IE 11 and Microsoft Edge)

阅读更多关于 Blank page and “Unknown name” error in vue.esm.js (Microsoft IE 11 and Microsoft Edge)

问题 Internet Explorer 11 and Microsoft Edge shows me a blank page when loading my Vue app. Console logs shows an "Unknown name" error pointing to the line "throw e" in vue.esm.js: Watcher.prototype.get = function get () { pushTarget(this); var value; var vm = this.vm; try { value = this.getter.call(vm, vm); } catch (e) { if (this.user) { handleError(e,vm, ("getter for watcher \"" + (this.expression) + "\"")); } else { throw e // UNKNOWN NAME ERROR (IE and Edge) } } finally { // "touch every

How do I make jQuery from a ES6 Bundle available to external scripts loaded in the HTML?

阅读更多关于 How do I make jQuery from a ES6 Bundle available to external scripts loaded in the HTML?

问题 On a website, I bundle all the javascript with Gulp into one bundle file. This includes jQuery, which I import into all the JS files that require it. I include the Google Tag Manager (GTM) directly in the HTML. However, some of the custom tags require jQuery, which is undefined according to browser console output. I assume jQuery is not exposed outside the bundle. How do I expose jQuery from the bundle so external scripts such as GTM can use it? 回答1: Solution Got the idea from jqfundamental's

Uncaught TypeError: Cannot set property '[any AMD]' of undefined

阅读更多关于 Uncaught TypeError: Cannot set property '[any AMD]' of undefined

问题 Example scrollmagic module, but it happens with others too. I suspect it is for Babel but not sure. How can we reproduce this bug? Git clone https://github.com/zurb/foundation-zurb-template projectname Install: npm install gsap --save-dev bower install scrollmagic --save-dev Add text line config.yml: "node_modules/gsap/src/uncompressed/TweenMax.js" "bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js" "bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation

Making export default work with Babel, webpack and Node.js

阅读更多关于 Making export default work with Babel, webpack and Node.js

问题 I can't figure out why my code doesn't work. I am building a ES6 style class and want to export it to be able to use it somewhere else in the server side. I put the code into a file called PlayerManager.js in the server folder. I put my client code in the src folder. And my server code in my server folder and server.js outside of server folder. Here is the directory structure: Root - dist - node_modules - public - server - src server.js webpack.base.js webpack.dist.js package.json .babelrc

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

阅读更多关于 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

Syntax Error: Unexpected Token ) w/ Jest & React Native

阅读更多关于 Syntax Error: Unexpected Token ) w/ Jest & React Native

问题 I'm attempting to use jest (v19.0.2) w/ my react native (v0.38.0) project however when I run the jest command I'm receiving the following error: ● Test suite failed to run /Users/kyledecot/code/root-react-native/node_modules/react-native/jest/setup.js:40 ) ^ SyntaxError: Unexpected token ) at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12) at handle (node_modules/worker-farm/lib/child/index.js:41:8) at process.<anonymous> (node_modules/worker-farm/lib/child/index

Add “proposal-object-rest-spread” plugin to babel.config.js to fix Microsoft Edge error SCRIPT1028

阅读更多关于 Add “proposal-object-rest-spread” plugin to babel.config.js to fix Microsoft Edge error SCRIPT1028

问题 I need to add this Babel plugin to babel.config.js to get rid of the Microsoft Edge Browser error SCRIPT1028: Expected identifier, string or number I installed the latest packages and added them to package.json. Below is what I tried but it doesn't transform the code after running npm run build : babel.config.js require("@babel/core").transform("code", {}); module.exports = { presets: ["@vue/app"], plugins: ["@babel/plugin-proposal-object-rest-spread"] }; package.json { "name": "example",

webstorm+react+webpack-demo

阅读更多关于 webstorm+react+webpack-demo

序言：通过这个小例子你也许、大概、可能会掌握以下几点 1、webstorm如何使用命令行 2、如何使用webpack的loaders把json格式的文件转化为javascript文件 3、如何使用不同的loaders把es6转换为浏览器可以识别的javascript文件 4、对于react而言如何使用合适的loaders把react的JSX文件转换为javascript文件 5、webpack的服务器启动后如何自动监听改动的文件以及浏览器如何自动刷新。准备：安装好webstorm和nodejs 6、其他更加详细参考：这里一、开始： 1、新建一个demo04文件夹为项目根目录，下面2个子文件夹分别是src和public a:public目录下一个index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webstorm+react+webpack</title> </head> <body> <div id="app"></div> <script src="bundle.js"></script> </body> </html> b:src目录下有 message.json代码是： { "name":"Life", "do":"is a", "what":"gradient

ES6的开发环境搭建

阅读更多关于 ES6的开发环境搭建

ES6的开发环境搭建使用Babel把ES6编译成ES5。先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist src：书写ES6代码的文件夹，写的js程序都放在这里。 dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件新建一个index.html文件。 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="./dist/index.js"></script> </head> <body> Hello ECMA Script 6 </body> </html> 　　引入js文件时，引入的是dist目录下的文件初始化项目 npm init - y -y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件全局安装Babel-cli npm install - g babel - cli 本地安装babel-preset-es2015 和 babel-cli npm install -- save -

ES6 环境的搭建

阅读更多关于 ES6 环境的搭建

安装babel npm install --g babel-cli 在项目目录下输入 npm init -y 会自动创建package.json文件 babel src/index.js -o dist/index.js 你会发现，在dist目录下确实生产了index.js文件，但是文件并没有变化，还是使用了ES6的语法。因为我们还需要安装转换包才能成功转换本地安装babel-preset-es2015 和 babel-cli cnpm install --save-dev babel-preset-es2015 babel-cli 很慢安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。 "devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1" } 新建.babelrc 在根目录下新建.babelrc文件(注意，以点开头的文件是隐藏文件，需要在linux环境通过命令创建)，并打开录入下面的代码 { "presets":[ "es2015" ], "plugins":[] } 这个文件我们建立完成后，现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。 babel src/index.js -o dist

订阅 babel