Articles of babel

不同的babel预设为后端和前端,但为相同的env

我有nodejs项目与反应前端部分,我想使用巴贝尔后端服务器(有导入/导出,和一些额外的function,如“装饰”,对象rest传播等) 此外,我想使用巴贝尔反应前端项目,但与不同的预置/插件集。 在后台我有最新的(8.2)nodejs,所以它已经知道类,asynchronous/等待等不应该被转移。 但在前端,我针对IE11,所以我必须启用大量的插件。 所以,如果我有单一的.babelrcconfiguration前端和后端我越来越transpiled后端代码。 我知道有一个'env'选项为babelconfiguration,但在描述的情况下,我有相同的'env'。 现在我结束了两个configuration:一个在package.json和一个在webpack.config(babel-loader选项)里面。 不过,我不喜欢结果,因为它可能会混淆新的开发者。 他可以在package.json里面findbabelconfiguration,并认为这是唯一的configuration,试图添加/修改某些东西,并努力为什么它不影响前端部分。 这样的设置也有一些问题: Jest无法从webpack.config中读取babel设置,所以我必须在.babelrc中定义额外的“env”:“test”,只是为了开玩笑。 这在testing过程中导致不必要的后端传输。

我怎样才能从别的地方访问项目的babel相关的代码?

这是一个奇怪的需求,但我不认为这是一个X / Y问题。 我需要从我自己的工具访问一个项目的babel相关的依赖项和configuration。 我的工具可能是devDep,或者全局安装,或者用npx运行; 我无法知道。 我知道这可以用babel-register来完成,因为像babel-tape-runner这样的优秀工具可以做到这一点。 不过,就我而言,我不能只require('babel-register') ,然后需要其他文件; 我正在使用module._compile 。 (写出临时文件,运行它,然后取消链接在这种情况下不是一个好的select,因为它可能会发生数百或数千次)。 有没有什么方法来使用用户的项目本地Babelconfiguration和预设和插件从某处读取的一些代码,在将这些东西传递给module._compile ?

Babel输出文件不存在

我尝试使用Babel来编译es5 js文件,但得到的文件不存在错误。 命令: npm run babel ./application/modules/js/seatMap/services/BabelTest.js –output-file ./application/modules/reservation_module/js/seatMap/services/babelOutput.js 命令执行后出错: ./application/modules/reservation_module/js/seatMap/services/babel.js doesn't exist 我使用–output-file param来指定输出文件,但节点告诉我文件不存在

ES6导入内部导出默认

我正在将NodeJS应用程序的整个代码从ES5迁移到ES6 / 7。 谈到import时我遇到了麻烦: 首先,我明白,导入直接调用文件。 例如 : import moduleTest from './moduleTest'; 这段代码将进入moduleTest.js并执行它。 所以,真正的问题是关于这个代码: import mongoose from 'mongoose'; import autopopulate from 'mongoose-autopopulate'; import dp from 'mongoose-deep-populate'; import { someUtils } from '../utils'; const types = mongoose.Schema.Types; const deepPopulate = dp(mongoose); export default () => { // DOES SOMETHING USING types AND deepPopulate return someThing; }; export […]

Webpack / Babel给予意想不到的令牌错误

我有一个使用React和Webpack编写的项目,当我尝试运行我的构build时,我得到一个“意外的令牌”错误。 奇怪的是,我在我的一台机器上得到了这个错误,而另一台却没有。 背景:我有两个不同的环境。 一个是我的开发机器(Windows 10 professional)另一个是我的生成服务器(Windows 10 standard) 在这两台机器上,我已经完全卸载Node,npm等。我已经重新安装了最新版本的Node(Node 6.2.1,npm version 3.9.3)。 当我在开发环境中运行我的构build命令时,一切正常。 当我在构build环境上运行构build时,出现“意外的令牌”错误,您可能需要一个合适的加载器来处理这个文件时间。 当它试图在babel中使用jsx时,似乎发生错误。 我的webpack.prod.config.js文件如下所示: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: { main: [ './dev/js/app/app', ] }, output: { filename: 'scripts.js', path: './.tmp/js/', publicPath: '/js/' }, resolve: { modulesDirectories: ['node_modules'], root: path.resolve('./dev/js/app'), extensions: ['', '.js', '.jsx'] }, module: […]

如何多次使用webpack包含babel-polyfill?

目前我有两个不同的NPM组件将被webpacked,他们都在他们的webpack入口点babel-polyfill polyfill。 现在捆绑后,我有两个不同的捆绑文件,但要求他们在同一个文件中会发生“babel-polyfill应该只需要一次”的错误。 我错过了什么,或者有没有办法解决这个问题?

在生产入口文件中使用babel-polyfill

我使用babel来转储ES7 js代码,并且所有的东西都像dev / staging中的魅力一样。 在应用程序内部,我非常依赖ES7的asynchronous/等待function。 我的入口文件如下所示: 'use strict'; require("babel-polyfill"); require("babel-core/register"); module.exports = require('./app/server').default(); 我不确定在生产环境中是否有必要保留babel-polyfill和babel-core / register模块,因为我在部署之前使用babel-cli来传输所有内容。 我认为它必须正确工作,即使我删除这些,使入口文件看起来像这样: import server from './app/server'; server(); 但是,如果这样做,我在启动应用程序时遇到了下一个exception: ReferenceError: regeneratorRuntime is not defined at C:\Users\Username\Documents\some-service\lib\app\repositories\someRepository.js:18:32 at Object.<anonymous> (C:\Users\Username\Documents\some-service\lib\app\repositories\someRepository.js:40:2) at Module._compile (module.js:460:26) at Object.Module._extensions..js (module.js:478:10) at Module.load (module.js:355:32) at Function.Module._load (module.js:310:12) at Module.require (module.js:365:17) at require (module.js:384:17) at Object.<anonymous> (C:\Users\Username\Documents\some-service\lib\app\controllers\someController.js:15:27) at […]

反应代码不与webpack编译

我的代码不会编译出于某种原因。 奇怪的是,当我在浏览器解释器中使用时会起作用。 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> 反应代码: var Cookies = require('cookies'); var cookieParser = require('cookie-parser'); var name = document.getElementById('name').innerHTML; //var name = req.user.name; var start = false; var Assets = React.createClass({ getInitialState: function(){ return({ assets: [], secondsElapsed: 0 }); }, tick: function() { //this.setState({secondsElapsed: this.state.secondsElapsed + 1}); if(start === true){ console.log(name); var myHeaders […]

如何从全局安装的节点应用程序中获取本地文件夹中没有node_modules的响应组件?

所以我得到了一个需要全局安装的软件包,它接受用户定义的反应组件并呈现它们。 我使用babel-register并定义: require('babel-register')({ presets: [ 'es2015', 'stage-0', 'react', ], }); 我的package.json文件如下所示: "dependencies": { "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babel-register": "^6.24.1", "babel-runtime": "^6.23.0", "chokidar": "^1.7.0", "del": "^2.2.2", "marked": "^0.3.6", "react": "^15.5.4", "react-dom": "^15.5.4", "window-size": "^1.0.0", "yamljs": "^0.2.10" }, 现在,因为这些用户定义的反应组件有时住在没有安装.babelrc地方或者任何包中,所以我真的希望使用那些与包依赖关系一起全局安装的组件。 我试图避免在全球安装我的软件包时必须安装这些依赖项。 虽然不知道如何。 我检查了node_module文件夹,并安装了所有的依赖关系: . […] ├── babel-code-frame ├── babel-core ├── babel-generator ├── babel-helper-bindify-decorators ├── babel-helper-builder-binary-assignment-operator-visitor ├── […]

如何从ReactJS组件中删除“onClick”属性?

我刚开始使用ReactJS和ReactJS 。 我不太清楚一些东西。 render( ) { return ( <div> <img src={this.props.pic} onclick={this.props.cb()} class="af1" /> </div> ); } 以上是我的App组件的渲染方法。 我想在第一次点击图像后删除onClick属性,并禁用图像( not able to click again )10秒左右(请build议我是否有更好的方法来暂时禁用点击图像)。 这是一个很好的解决scheme吗? 为什么不能在Chrome的开发者控制台中看到onclick attrib? 我真的开始喜欢学这个东西,我迷路了。