小编Leo*_*tny的帖子

我有需要执行自己并将结果保存到变量

var $ = require('gulp-load-plugins')();

我正在玩Babel并试图弄清楚如何在ES6中做到这一点.现在显然我可以做类似的事情

import gulpLoadPlugins from 'gulp-load-plugins';
const $ = gulpLoadPlugins();

但是我想知道是否有一些很好的单线方式来做它,就像需要一样.

我的webpack eslint配置:

  eslint: {
    configFile: ".eslintrc",
    emitWarnings: true
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.(js|jsx)$/,
        loaders: [
          require.resolve('react-hot-loader'),
          require.resolve('babel-loader'),
          require.resolve('eslint-loader')
        ],
        exclude: /node_modules/
      }
    ]
  },

我的错误:

ERROR in ./src/scripts/main.jsx
Module parse failed: /Users/alexandre/Documents/developpement/piemapping/apple-pie/node_modules/react-hot-loader/index.js!/Users/alexandre/Documents/developpement/piemapping/apple-pie/node_modules/babel-loader/index.js!/Users/alexandre/Documents/developpement/piemapping/apple-pie/node_modules/eslint-loader/index.js!/Users/alexandre/Documents/developpement/piemapping/apple-pie/src/scripts/main.jsx Line 12: Unexpected token
You may need an appropriate loader to handle this file type.
|
| // Imports
| import React from "react";
| import Dispatcher from "./Dispatcher.js";

没有webpack我正在运行这个命令,它运行得很好:

"lint": "eslint . --ext .js --ext .jsx --fix"

我希望webpack在编译时检查我的代码并编译或不依赖eslint是否引发错误.

我在使用Karma + Browserify为一些React组件设置测试配置时遇到了麻烦.提到代码是用ES6编写的,我已升级到最新的Babel版本(6+),我认为这是该配置中所有邪恶的根源.

由于Babel现在被拆分并且有这种基于插件的方法(预设),我不知道如何在karma.conf文件中指定它.

我当前的配置如下所示:

module.exports = function(config) {
  config.set({
    basePath: '',
    browsers: ['PhantomJS'],
    frameworks: ['browserify', 'jasmine'],
    files: [
      'app/js/**/*',
      'app/__tests__/**/*'
    ],
    preprocessors: {
      'app/js/**/*': ['browserify'],
      'app/__tests__/**/*': ['browserify']
    },
    browserify: {
      debug: true,
      transform: ['babelify']
    },
    singleRun: true
  });
};

但是,这会因为包错误而失败(解析文件时出现意外的令牌......).我也收到You need to include some adapter that implements __karma__.start method!错误消息.

对于一些非常简单的组件来说,这很有趣.

例如简单的React文件:

import React from 'react';


class FooterComponent extends React.Component {
  render() {
    return (
      <footer>
        This is the application's footer
      </footer>
    );
  }
}


export …

我有一个反应预设,我想将pragma params传递给transform-react-jsx.

现在我分别安装transform-react-jsx并设置我的.babelrc喜欢:

{
  "presets": [
    "react"
  ],
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "dom.hJSX"
    }]
  ]
}

但我想知道是否有另一种方法可以将设置传递给预设中的插件.

我对Python和Flask都很陌生(使用Jinja2作为模板引擎)我并不确定我是以正确的方式做到这一点.我正在使用Flask-Babel扩展来为我的Web应用程序添加i18n支持.我想从我的js代码中获取本地化字符串,例如:

var helloWorld = gettext('Hello, world');
console.log(helloWorld); //should log a localized hello world message

为此,我配置了babel(babel.cfg):

[python: **/**.py]
[jinja2: **/**.html]
extensions=jinja2.ext.autoescape,jinja2.ext.with_
[javascript: **/**.js]
encoding = utf-8

它的初始化是(为简单起见省略了导入):

#main Flask app
app = Flask(__name__)

#localization
babel = Babel(app)

LANGUAGES = {
    'ca': 'Catalan',
    'en': 'English',
    'de': 'Deutsch',
    'es': 'Español',
    'fi': 'Finnish',
    'it': 'Italian'
}

@babel.localeselector
def get_locale():
    return request.accept_languages.best_match(LANGUAGES.keys())

#some more stuff...

Babel在构建POT/PO语言文件时识别该字符串,但似乎我无法从js代码访问这些本地化字符串,因为未定义gettext函数.似乎Jinja2忽略了这一部分.

任何提示？

全部，我将SystemJS与Babel一起用作编译器，以了解如何在浏览器中从ES6生成ES5代码。当我尝试使用Chrome Dev Tools查看源代码时，看到的是ES5代码，而不是原始的ES6代码。我babelOptions在SystemJS中使用默认值config.js，如下所示：

System.config({
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  ...

我可以看到内联源代码映射插入到生成的Javascript底部，格式为：

//# sourceMappingURL=data:application/json;base64,...

Chrome浏览器不应该解释这一行并向我显示ES6代码而不是ES5代码吗？我是否会误解这样的内联源映射应该如何工作？（我已经在Chrome 43.0.2357.65和45.0.2411.0上尝试过。我也没有在Firefox 38.01上尝试过成功。我正在运行Mac OS X 10.10.2。）任何帮助将不胜感激。

例如,是否有一个选项可以将Babel传递给只有透明箭头函数,或者让/ const？

我的用例是删除某些功能的转换,因为浏览器广泛支持它们.

使用ember-cli@0.2.7和emberjs@1.13.2.

来源emberjs模型

export default DS.Model.extend({
    name: DS.attr('string'),

    displayName : Ember.computed('name', () => {
      return this.get('name');
    })
});

翻译模型

'use strict';

var _this = undefined;

exports['default'] = DS['default'].Model.extend({
    name: DS['default'].attr('string'),

    displayName: Ember.computed('name', function () {
        return _this.get('name'); //at this point _this is undefined
    })
});

麻烦的是_this永远不会设置模型.为什么会这样？

为了优化复杂的 PostgreSQL 查询，我尝试创建一个包含标量字符串和数组并支持数组操作 ( @>,<@和&&)的索引。

但BTREE到目前为止我只设法创建了一个索引：

CREATE INDEX idx1
  ON "MyTable"
  USING btree
  ("Char_1", "Array_1", "Array_2", "Array_3", "Char_2");

不支持数组操作（@>,<@和&&）。

我尝试使用GINand GiST（使用btree_ginandbtree_gist扩展），但我发现无法在同一索引中同时使用标量列和数组列。

看起来GIN不支持标量：

ERROR:  data type character has no default operator class for access method "gin"
HINT:  You must specify an operator class for the index or define a default operator class for the data type.

whileGiST不支持数组： …

我在我的应用程序中使用es6模块,并且在我的chrome检查器中调试时遇到问题.当我在我的代码中执行以下操作时:

import 'widget' from './widget'

class SomeClass {
  componentDidMount(){
    debugger; // widget is not defined here according to chrome console!
    widget.doSomething();
  }
}

查看浏览器正在阅读的已编译源文件,我看到应用于原始js文件的babelify转换已将'widget'变量重命名为'_widget_Js'.但是,我已经编译了JS以及源映射,因此chrome检查器显示原始的JS文件,但是当我引用原始的'widget'变量时它不能识别它(它确实看到'_widget_Js'变量,但是我当然我不想每次调试时都要查找已编译的翻译变量!).

有关如何让chrome识别原始导入名称的任何建议？如果它有帮助,我可以提供有关我的设置的更多信息(gulp + browserify + babelify).谢谢!