Tag: babel

如何将服务器端渲染中的数据传递给节点的reactjs组件: 我刚刚开始学习reactJS的function，我很新。我试图找出一种方法，通过服务器端渲染概念从nodeJS传递的价值JS。在下面的例子中，我能够定义一个反应组件，并将其添加到服务器，并在UI中呈现它，但我不知道如何将数据传递给可以在组件渲染函数内使用的组件。 client.js var React=require('react'); var ReactDOM=require('react-dom'); var Component=require('./Component.jsx'); ReactDOM.render( React.createElement(Component),document ); Component.jsx var React=require('react'), Request=require('superagent') module.exports = React.createClass({ getInitialState: function () { return { }; }, componentWillMount: function () { }, componentDidMount: function() { clearInterval(this.intervalID) }, _handleClick: function () { alert('You clicked!') }, render:function(){ return( <html> <head> <title> ReactJS – demo </title> <link […]

Babel不会忽略node_modules目录，尽pipe它处于“ignore”configuration: 由于某种原因， babel不会忽略node_modules目录，尽pipe我在.babelrc文件的"ignore"字段中指定了它。为什么会发生？如何使babel按预期行事？我的目标是在将我的应用程序推送到远程仓库再到服务器之前，压缩和压缩ExpressJS应用程序中的所有.js文件（特别是我的所有后端代码）。所以我用babel和babili 。这是我的.babelrcconfiguration： { "presets": [ ["latest", { "modules": false }] ], "env": { "development": { "presets": ["stage-0", "react", "babili"] }, "production": { "presets": ["stage-0", "react", "babili"] } }, "ignore": [ "node_modules", "assets", "view", "public", "test", "spec", "logs", "lib/jasmine_examples", "db" ] } 我从命令行运行babel像这样： ./node_modules/.bin/babel . -d ~/app_compressed/ babal开始压缩node_modules目录： node_modules\apache-crypt\gensrc\index.js -> […]

types的stream量提示没有被巴贝尔剥夺: 我有一个使用UI组件的自定义“主题”的React.JS项目。这个主题还提供了构build脚本（webpackconfiguration，babelconfiguration等）。我想在这个项目中开始使用Flow。我安装了所需的npm包，并将flow添加到babel的预设中，然后将props = {mytestprop: string}到我的一个React类中。 Webpack成功地编译了我的代码，但是types提示没有被剥离！当然，浏览器不能执行这个代码 – 当我尝试运行它时，会引发ReferenceError: string is not defined 。 .babelrc的当前预设列表是： ["es2015", "react", "stage-2", "flow"] 。我确定这是babel使用的实际列表，因为如果我删除前3个预设中的任何一个，编译将失败。你有什么想法可能导致这种行为剥离streamtypes？

JavaScript装饰器中的“target”是什么？: 我正在玩JavaScript的装饰，但我很难与传递给装饰器function的目标例如，如果你有 @Bar() class Foo { @deprecated(true) doMagic() {} } function Bar() { return function decorator(target) { } } function deprecated(state) { return function decorator(target, name, config) { return config; } } 我希望这两个目标都是同一个东西，没错。例如 function Bar() { return function decorator(target) { let bar = new target(); // WORKS bar instanceof target; // -> true } […]

“导出默认值”不适用于Babel React: 我使用react来构build我的组件库。我需要有一个index.js导入所有组件在一个地方。像这样的东西： MyComponents/ Button.js Label.js index.js 在index.js里面我试着做下一步： // this export nothing export {default} from './Button'; // this tells me about syntax error export default from './Button'; 我发现只有这个解决scheme有效 import Button from './Button'; export default Button; 但是，我发现一些React组件库使用上面提到的语法（ export default from './Button' ） – 它以某种方式工作。看起来他们使用一些babel-plugin-transform-*来做到这一点。请find我find如何将我的两个导入导出线转换为一个export … from …线。谢谢。 PS最后我需要这样做： import Button from './MyComponents';

Babel插件不按预期运行 – 输出不总是显示: 我已经做了一个babel插件，应该find具有特定名称的所有function，以获得input参数。但是，它并没有像我期望的那样运行。现在我只是console.log预期的参数，但它们并不总是find。 module.exports = function ({ types: t }) { return { visitor: { CallExpression: function(path) { const node = path.node; console.log("name:", node.callee.name); if(node.callee.name === 'i18n') { const argumentNode = node.arguments[0]; if(t.isStringLiteral(argumentNode)){ console.log(argumentNode.value); } } } } }; }; 其实第一个console.log ： console.log("name:", node.callee.name); 创造像20个输出，但我期待更多的方式。在.babelrc ，我添加了我的ast-crawler像这样： { "plugins": [ "babel-plugin-add-module-exports", "ast-crawler" ], "presets": [ […]

babel，带有nodemon脚本的webpack？: 我想知道是否有一种方法来configurationwebpack babel和nodemon。我几乎在网上search，但没有发现任何有用的东西，或者可能是我，因为我是非常新的构build工具。我在我的package.json有这个脚本： "start": "nodemon app.js –exec babel-node" 它会传输我的代码，并在发生更改时重新启动服务器。我想知道是否有这样的手表function的webpack的configuration。我可以做到这一点与webpack（运行服务器，并观察变化，并重新启动巴贝尔transpile）？

发布一个需要来自node_modules的CSS的npm包: 我试图发布到npm的React组件需要一个CSS样式表，来自我的项目在node_modules的一个依赖关系。基本上，我的index.js文件（将组件暴露给外部世界）看起来像这样： import Gallery from './containers/GalleryContainer'; require('../../node_modules/jscrollpane/style/jquery.jscrollpane.css'); export default Gallery; 这可以在我的webpack驱动的开发环境中工作，因为webpack拾取CSS文件并将其注入DOM（使用css-loader和style-loader），但是如果我不确定如何打包发布。我想发布这个包作为ES5，并希望用户能够在ES6上下文（使用webpack / browserify）或直接在浏览器中使用它。到目前为止，我把我的ES6代码转换成ESB和Babel到preublish的lib文件夹中。这需要照顾的JavaScript，但不是它需要的CSS。我是否必须指示我的图书馆的用户手动链接CSS，还是有一种方法可以使这个require语句是可移植的？

babel编译器导出未定义和实际导出在一起: 有人可以解释为什么babel编译以下内容： import {resolve} from "path"; export const exportedConst = "value"; 至： "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.exportedConst = undefined; var _path = require("path"); var exportedConst = exports.exportedConst = "value"; 如果我导出了exportedConst而不导入任何其他模块： export const exportedConst = "value"; 它将其编译为： "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var exportedConst = exports.exportedConst = "value"; 为什么会产生这一行？ exports.exportedConst […]

使用Nodemon在Node.js v6.2.0上安装Babel V6.x ES7 Async / Await: 男人是一个痛苦的设置！我已经按照安装说明点击了nodemon框： https://babeljs.io/docs/setup/#installation npm install babel-cli babel-preset-es2015 –save-dev .babelrc在根目录下： { "presets": ["es2015"], "plugins": ["transform-async-to-generator"] } package.json （我已经安装了更多的babel的东西，如图所示）： … "devDependencies": { "babel-cli": "^6.11.4", "babel-core": "^6.13.2", "babel-plugin-transform-async-to-generator": "^6.8.0", "babel-polyfill": "^6.13.0", "babel-preset-es2015": "^6.13.2", "babel-preset-node6": "^11.0.0", "babel-register": "^6.11.6" }, "scripts": { "startn": "nodemon app.js", "babel-node": "babel-node –presets=es2015 –ignore='foo|bar|baz'", "babel-dev": "nodemon –exec npm run babel-node — experiment/socketio/test.js" }, … test.js […]