I'm trying to use decorators on classes in React, using babelify. I have the 'es7.decorators' option applied in babel, but I keep getting an 'unexpected token' error when it encounters the '@' character. Anyone have any ideas? A simple example is below. Decorator: export default function(Component) { return class extends Component { constructor() {...} }
我试图在React的类中使用装饰器,使用babelify。 我在'babel'中应用了'es7.decorators'选项,但遇到'@'字符时我一直收到'意外标记'错误。 有人有主意吗? 下面是一个简单的例子。 装饰: export default function(Component) { return class extends Component { constructor() {...} } } 类: import myDecorator from 'decorator'; @myDecorator class MyClass{...} 我使
I have to use es6 modularity for my next project, the tools used for building the es6 modularity have been finalised to be gulp,babelify & browserify, I am confused because I am new to all three,& how they work to create es6 modularity. relevant part of my gulp file is function bundle_js(bundler) { return bundler.bundle() .on('error', map_error) .pipe(source('app.js')) .pipe
我必须在下一个项目中使用es6模块化,用于构建es6模块化的工具已经最终确定为饮用,babelify和browserify,我很困惑,因为我对这三者都是新手,他们是如何工作来创建es6模块化的。 我的大文件的相关部分是 function bundle_js(bundler) { return bundler.bundle() .on('error', map_error) .pipe(source('app.js')) .pipe(buffer()) .pipe(gulp.dest('dist/')) .pipe(rename('app.min.js')) .pipe(sour
I am learning React and try to create a simple React application. I want to use ES2015 modules and some ES6 features so I installed Babel and browserify via npm. These are node modules that I installed: babel babel-preset-es2015 babel-preset-react babelify browserify gulp reactify vinyl-buffer vinyl-source-stream react react-dom I want to make script into several files
我正在学习React并尝试创建一个简单的React应用程序。 我想使用ES2015模块和一些ES6功能,所以我安装了Babel并通过npm进行了浏览。 这些是我安装的节点模块: 巴别塔 巴别预置-ES2015 巴别预置反应的 babelify browserify 吞 reactify 乙烯基 - 缓冲 乙烯基 - 源极 - 流 应对 反应-DOM 我想将脚本制作成多个文件(比如itemComponent作为React),并将它们合并到真正网站加载的dist / app.js中。 为
i'm working on a big web application. I'm using Gulp to build javascript files and Browserify. The problem is that when i'm in development mode, it takes so much time to rebuild my javascript bundle each time i make changes (using watch) For my application, i need to package all javascript files in one file with a special order: all vendors files (including bootstrap jquery etc
我正在研究一个大型的网络应用程序。 我正在使用Gulp来构建JavaScript文件和Browserify。 问题是,当我处于开发模式时,每次我进行更改(使用手表)时,都需要花费很多时间来重建我的JavaScript包, 对于我的应用程序,我需要用特殊的顺序将所有javascript文件打包到一个文件中: 所有供应商文件(包括引导jquery等..) 一些需要进行浏览的文件(使用commonJS风格和require('...'); ) 一些需要被浏览和.jsx
I have a problem to understand this in Arrow functions. I read a lot of answers for example: Methods in ES6 objects: using arrow functions and explantation in this description Link github and everyone say that this should bind to Window , but when I check these examples I see undefined, If any of you, know why? var foo = { bar: () => console.log(this) // lexical this is window or som
我有一个问题要了解这箭功能。 我读了很多答案,例如:ES6对象中的方法:在这个描述中使用箭头函数和解释链接github和所有人都说这应该绑定到Window,但是当我检查这些例子时,我看到了未定义的,如果你们任何人知道为什么? var foo = { bar: () => console.log(this) // lexical this is window or something else } foo.bar() 我使用babel来编译代码: var foo = { bar: function bar() {
Is there a way to do dynamic inheritance with ES2015 with Browserify and Babelify ? I need to wrap a class "Predecessor" with extra functionality "Constructor", and I don't know what the Predecessor is going to be, so I don't know the number of arguments or anything about its execution. Normally, for dynamic inheritance in JS, I would do: function Constructor() {
有没有办法使用Browserify和Babelify与ES2015进行动态继承? 我需要用一个额外的功能“构造器”来包装一个类“Predecessor”,我不知道前代将会是什么,所以我不知道参数的数量或者它的执行情况。 通常,对于JS中的动态继承,我会这样做: function Constructor() { Predecessor.apply(this, arguments); // <<-- this is what I'm trying to do. } Constructor.prototype = Object.create(Predecessor.prototype); Cons
Im am trying to get into react using borwserify, watchify, babelfiy (with es2015 preset). Could please anyone explain, why this is working: export default class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { username: 'Tyler McGinnis' } this.handleChange = (e) => { this.setState({username: e.target.value}) }; }
我正在尝试使用borwserify,watchify,babelfiy进行反应(使用es2015预设)。 可以请任何人解释,为什么这是工作: export default class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { username: 'Tyler McGinnis' } this.handleChange = (e) => { this.setState({username: e.target.value}) }; } render() { return (
I have 2 classes (ES2015 Classes style) in separate files and one App file with require. I want to use this CommonJS modules in browser. Most popular lib is Browserify with Babel compliller for ES2015 syntax (babelify). Example: Class1.js class Class1 { constructor() { this.prop = 1; } method() { console.log(this.prop); } } module.exports = Class1; Class2.js class Class2 {
我有两个类(ES2015类风格)在单独的文件和一个应用程序文件与需求。 我想在浏览器中使用这个CommonJS模块。 最流行的lib是Browserify和Babel compliller的ES2015语法(babelify)。 例: Class1.js class Class1 { constructor() { this.prop = 1; } method() { console.log(this.prop); } } module.exports = Class1; Class2.js class Class2 { constructor() { this.prop = 2; } method() {
I'm trying to run the relay-starter-kit updateSchema.js with babel-node. It seems that it doesn't recognize the arrow functions: > SyntaxError: .../build/updateSchema.js: Unexpected token (10:9) 8 | 9 | // Save JSON of full schema introspection for Babel Relay Plugin to use > 10 | async () => { | ^ I've tried to add the preset "stage-0" to &q
我正尝试使用babel-node运行relay-starter-kit updateSchema.js。 它似乎并不承认箭头功能: > SyntaxError: .../build/updateSchema.js: Unexpected token (10:9) 8 | 9 | // Save JSON of full schema introspection for Babel Relay Plugin to use > 10 | async () => { | ^ 我试图将预设的“stage-0”添加到“.babelrc”中,以修复该错误,但是我得到: SyntaxError: .../build/updateSchema.j
I am starting out with babel.js to make use of JavaScript ES6 features, however I have run in to a problem I am currently building my app using browserify and reactify with the following command. browserify -t reactify app/main.js -o public/scripts/bundle.js Now I want to use an equivalent command in babel to bundle up my required modules, written in ES6 to a bundle.js. This doesn't work
我开始使用babel.js来使用JavaScript ES6功能,但是我遇到了一个问题 我目前正在使用browserify构建我的应用,并使用以下命令进行重新验证。 browserify -t reactify app/main.js -o public/scripts/bundle.js 现在我想在babel中使用等价命令将ES6中所需的模块捆绑到bundle.js中。 这不起作用,只是给我一个ES5版本的main.js文件。 babel app/main.js -o public/scripts/bundle.js 不过,我可以使用babel将我的bundle.js