Tag: babeljs

哪个babel插件声明这个var？

我试图开始auth0-lock这个电子项目 。 在一个auth0的嵌套的依赖项（ node-formidable ）中，这个行在文件的顶部： if (global.GENTLY) require = GENTLY.hijack(require); 这是他们用来testing覆盖全局需求，但设置global.GENTLY为false应该绕过它的开发模式。 然而，在这个项目中的webpack / babel configs（下面）中的东西正在改变这一行： var require;if (global.GENTLY) require = GENTLY.hijack(require); 这是覆盖全局require和打破其余的文件/构build与require is not a function 我正在通过插件一个接一个地find正在做的事情，但到目前为止没有做任何事情。 任何人都知道什么设置会导致这种覆盖？ // .babelrc { "presets": [ ["env", { "targets": { "node": 6 }, "useBuiltIns": true }], "stage-0", "react" ], "plugins": ["add-module-exports", "dynamic-import-webpack"], "env": { "production": { "presets": ["react-optimize"], […]

没有为nodeJS转译的babel定义regeneratorRuntime

我收到以下错误： ReferenceError: regeneratorRuntime is not defined 这是由…造成的 _asyncToGenerator(regeneratorRuntime.mark(function _callee() { 我已经尝试了Babel 6中的方法regeneratorRuntime没有用async / await 定义 ，也没有定义RegeneratorRuntime ，但没有运气。 我的.babelrc如下 { "presets":["latest"] } 我可以通过添加require('babel-polyfill')来解决问题，但是如果在开发期间使用babel-node运行它，这条线会抛出问题。 任何人都面临类似的问题？

Webpack + React：Webpack从我的node_modules文件夹以正确的顺序在一个地方构build，并且在其他地方的顺序不正确

我对Webpack和React很陌生。 我只是试图让一个简单的Webpack / Babel / React模板正常运行，所以我可以抓住它，开始在应用程序上工作，而不用担心每次都设置它。 不过，我遇到了一个奇怪的问题。 我用React使用Webpack，Node和Babel制作了Hello World。 问题是，它只能在我制作的特定目录中工作。如果我复制/粘贴所有内容，并尝试运行我的NPM脚本，则会在我的JSX文件中遇到“未知模板”错误。 经过一番调查，我很确定问题在于，由于某种原因，当我在原始目录之外运行一切时，Webpack以不同的顺序构build事物。 这是我从Webpack得到的输出： [8] ./node_modules/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built] [11] ./node_modules/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built] [14] ./node_modules/react/lib/ReactElement.js 11.2 kB {0} [built] [16] ./node_modules/react/lib/React.js 5.08 kB {0} [built] [49] ./node_modules/react/react.js 56 bytes {0} [built] [82] multi ./main.js 28 bytes {0} [built] [83] ./src/main.js 581 bytes {0} [built] […]

蓝鸟过滤捕捉巴贝尔和扩展错误类

我运行一个nodejs（服务器）项目（v6.11.2），并通过扩展Error类定义了自定义错误。 我使用babel编译，我使用的babelconfiguration是： { "presets": [ ["env", { "targets": { "node": "current" } }] ] } AppError类： export default class AppError extends Error { constructor (message, status) { super(message); this.name = this.constructor.name; Error.captureStackTrace(this, this.constructor); this.status = status || 500; } } 我想检查如果取消方法抛出一个AppError。 当我尝试使用蓝鸟过滤的catch，我得到以下错误： 类构造函数AppError不能被调用没有“新” cancel() .catch(AppError, (e) => { // This is not working }); 但是下面的代码将会正常工作： […]

与Webpack和Babel一起使用Benchmarkjs

我试图得到一些基本的基准testing工作，并无法找出正确的configuration。 我试图使用webpack和babel Benchmarkjs来将我的代码转换成es5。 我创build了一个benchmarks.webpack.js作为入口点，如下所示： var context = require.context('./src/js', true, /-benchmark\.js$/); context.keys().forEach(context); module.exports = context; 然后我有一个我想运行的基准testing文件（ test-benchmark.js ）： import benchmark from 'benchmark'; import benchmarks from 'beautify-benchmark'; let suite = new benchmark.Suite; suite.add('RegExp#test', function() { /o/.test('Hello World!'); }) .add('String#indexOf', function() { 'Hello World!'.indexOf('o') > -1; }) .on('cycle', function(event) { benchmarks.add(event.target); }) .on('complete', function() { benchmarks.log(); }) .run(); […]

“React-Native 0.16.0和0.17.0”中的“babelHelpers.asyncToGenerator不是一个函数”

我将React-Native从0.14.0更新到了0.16.0，从现在开始，我在运行时遇到错误： 这里是npm dependencies ： "dependencies": { "async": "^1.5.0", "immutable": "^3.7.6", "react-native": "^0.16.0", "react-native-contacts": "../../react-native-contacts", "react-native-contacts-rx": "^1.0.1", "react-native-gifted-messenger": "0.0.7", "react-native-i18n": "0.0.6", "react-redux": "^4.0.1", "redux": "^3.0.5", "rx": "^4.0.7" }, "devDependencies": { "babel-eslint": "^5.0.0-beta6", "eslint": "^1.10.3", "eslint-config-airbnb": "^2.1.1", "eslint-plugin-react": "^3.11.3", "events": "^1.1.0", "flux": "^2.1.1", "keymirror": "^0.1.1", "lodash": "^3.10.1", "redux-devtools": "^3.0.0" } 和我的.babelrc文件： { "retainLines": true, "compact": true, "comments": […]

Node.js与快递和反应，fs.readdir无法find文件

在我的应用程序中，我使用Node.js，React和Express。 我想从我的光盘目录加载图片。 假设我要加载的文件位于// localhost：3000 / images / own / （当我input例如//localhost:3000/images/own/my_pic.jpg浏览器返回某些图片） 我曾经用ajax调用它： $.ajax({ url: '/images/own', dataType: 'text', success: function (data){ //some actions here } }); 但现在我得到404错误“GET http：// localhost：3000 / images / own / 404（Not Found）”。 我知道加载节点的文件通常是用fs完成的，但是由于我的脚本是用babel编写的（在React中需要），所以我不能使用require（'fs'） 。 我find了https://github.com/OptimalBits/fs.js ，我可以使用它（通过将其包含在我的html文件中），但是在使用它时如下例所示： FSFactory(1024*1024, 'images/own', function(err, fs){ if(err){ console.log(err); } fs.readdir('/', function(err, entries){ if(err) console.log(err); console.log(entries); }); }); fs对象是空的，readdir返回空表。 我应该以不同的方式给目录path，还是有其他的方式来加载文件？ […]

使用babel连接文件

这是我的文件结构 /base.js /foo/main.js /foo/bar/main.js /baz/main.js 我总共需要4个文件。 一个树的每个叶子节点都包含“包含”文件的所有内容。 这里是文件的内容。 base.js //anything really /foo/main.js include 'base.js' /foo/bar/main.js include 'base.js' include '/foo/main.js' /baz/main.js include 'base.js' 这些“包含”就像php包含的那样，它们在babel的编译时并不是传统的从es2016 / es2016包含的。 我希望每个文件都是为以前版本的ES编译的，并且在把它们放到服务之前，它的所有内容都包含在层次结构中。 他们不会在节点服务器上。 这将是传统的PHP / Apache主机。 巴别尔只是为了发挥作用。 我知道我可以使用–out-file选项将所有js编译成单个文件，我可以导入和导出模块，但是如何让babel连接不同的文件，而无需编写和维护cli命令，只需要将“include '指令在文件的顶部。

webpackconfiguration错误无法parsing模块

当我运行webpack – watch我得到了Cannot resolve module 'js/app.js' 。 然后，当我执行npm run dev时，我的app.min.js没有编译。 我创build了一个git仓库，这是我的webpack.config.js var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), devtool: debug ? "inline-sourcemap" : null, entry: "js/app.js", //what's wrong with this line? module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', […]

如何判断哪个文件被Babel 6转发？

我有一个使用babel-register的项目，当在Node 6.6项目中需要该模块时，将ES6源代码dynamic地转换为ES5。 我已经阅读了babel-register钩子到Node的require函数中，以便在你尝试加载的时候传输一个文件，但是我并不总是清楚哪些文件会受到这个变化的影响。 当我编写testing的时候，这个问题对我来说有很大的帮助：只有我的生产代码能够被转译，或者testing代码是否被转译？这就引出了一个更一般的问题，这就是本文的主题： 我怎样才能知道何时Babel正在运行，哪些文件正在被转发？ 示例代码 比方说，我有这样的生产类是用ES6语法编写的 //src/greeter.js export default class Greeter { sayHello() { return 'Hello World'; } } 而Babel被configuration为像这样（ .babelrc ） { "presets": ["es2015"] } 然后有一些testing代码 //features/step_definitions/greeter_steps.js import Greeter from '../../src/greeter'; //Causes greeter.js to be transpiled import expect from 'expect'; var stepWrapper = function() { //Does Babel try to transpile this code too? […]