Articles of babeljs

npm与巴贝尔和webpack创build反应应用程序不起作用

我是新兴的UI技术。 我正在尝试我的手在reactjs随着webpack和babel我创build了一个应用程序后使用npm安装它使用create-react-app插件。 我进入src文件夹并执行npm start,启动浏览器并显示演示页面。 我试图添加babel和webpack到这个演示,但不幸的是它不工作。 我打开浏览器中的index.html页面,它不显示我所遵循的jsx文件内容https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-的WebPack-du107r9zr 我不知道为什么这不起作用,可以请一些帮助吗? index.jsx import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { render () { return <p> Hello React!</p>; } } render(<App/>, document.getElementById('app')); 的index.html <html> <head> <meta charset="utf-8"> <title>React.js using NPM, Babel6 and Webpack</title> </head> <body> <div id="app" /> <script src="public/bundle.js" type="text/javascript"></script> </body> </html> .babelrc文件 { […]

在NPM作用域包中公开两个(或更多)Node.js Babel类

我有一个公共范围的包中的两个Node.js Babel类,并希望将它们公开。 公共范围的NPM中的类: Index.js export default class Index { constructor() { console.log("abc!"); } } SecondClass.js export default class SecondClass { constructor() { console.log("SecondClass! SecondClass!! SecondClass!!!"); } } 在公共范围的NPM中,我只能设置一个主文件: "main": "./dist/index.js", 而在使用项目,我试图导入他们,但我失败了! import { Index, SecondClass } from '@my-scope/my-package'; new Index(); new SecondClass(); 依赖关系: "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" } 我该怎么做? 我能以某种方式做到吗? 更新1:即使使用包中的files没有工作,使情况变得更糟,一旦我使用它,所有的JS文件都没有了,当我在用法项目中安装我的范围包。 "files": [ […]

将“gulp transpile”JavaScript文件反转为原始文件

我有使用gulp transpile命令创build的JavaScript文件。 我想获得原始的JavaScript文件。 我怎么能得到原始的js文件? 有没有JavaScript模块或gulp命令来反转这个命令? 谢谢 这是jsp文件的一部分: …. var _regeneratorRuntime = require('babel-runtime/regenerator')['default']; var _Object$assign = require('babel-runtime/core-js/object/assign')['default']; var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; Object.defineProperty(exports, '__esModule', { value: true }); var _bluebird = require('bluebird'); var _bluebird2 = _interopRequireDefault(_bluebird); var _logger = require('../logger'); var _logger2 = _interopRequireDefault(_logger); var _jimp = require('jimp'); var _jimp2 = _interopRequireDefault(_jimp); var gulCommands = {}, commands […]

运行babel时,JSdoc for方法在传输代码中丢失

我正在通过让消费者在使用文档时查看文档来使图书馆更加便于用户使用。 我有这个脚本在build上运行: babel src –out-dir dist –quiet 这是我的.babelrc : { "presets": [ ["es2015", { "loose": true, "modules": "commonjs" }] ] } 而这个ES6类只有一个方法: const { makeRequest } = require('../../lib/api'); const commonService = require('../commonService'); /** * @augments commonService */ class bingSpellCheck extends commonService { /** * Constructor. * * @param {Object} obj * @param {string} obj.apiKey * […]

如何使用babel与npm包将被反应使用

试图做我认为是一件简单的事情。 我有一个使用高级js语法的节点包。 我想依靠它在一个反应​​的项目。 所以我通过–save-dev安装了babel包,并添加了一个.babelrc : { "presets": ["env"], "plugins": ["transform-object-rest-spread"] } 这还不够,所以我在install添加了一个npm脚本来触发编译。 然后我不得不通过main包含编译目标lib/index.js作为我的入口点。 所以最后我的package.json看起来像这样: { "name": "bla", "version": "1.0.0", "scripts": { "postinstall": "babel src –out-dir lib" }, "main": "lib/index.js", "dependencies": {}, "devDependencies": { "babel-cli": "^6.26.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-react-native": "^4.0.0" } } 当我在本地运行npm install ,它会正确地build立。 然而当反应脚本build立这个(dep是从github),我得到一个错误: sh: 1: babel: not found 。 为什么这么难? 我究竟做错了什么?

_iteratorError undefined不是一个函数

下面的代码取一个文件的内容,replace一些字符,并输出结果: 的test.txt: # Title ## Title 2 Paragraph index.js: #!/usr/bin/env node require('babel/polyfill') 'use strict' var fs = require('fs') , filename = process.argv[2] if (process.argv.length < 3) { console.log('Usage: node ' + process.argv[1] + ' FILENAME') process.exit(1) } function massReplace(text, replacementArray) { let results = text for (let [regex, replacement] of replacementArray) { results = results.replace(regex, […]

我可以使用Node运行在ES6中编写的Gulp任务吗?

我通过Babel在Node上使用ES6。 我可以使用run-babel脚本运行ES6脚本。 所以,这将工作: node run-babel build.js //build.js is written in ES6 但是现在我想从Gulp任务中访问这些ES6脚本中的一个,但是Gulp运行在vanilla节点上。 有没有办法在ES6中编写Gulp任务?

React服务器端渲染,如何导入一个React组件?

我正在把ES6转换成ES5。 用于NodeJS Express服务器文件的BabelJS和服务器端渲染输出到目录build / server /。 Browserify + babelify将ReactComponents输出到build / client / bundle.js文件 当试图将一个React Component从build / client / bundle.js导入到构build/服务器/文件时,应用程序崩溃,因为我正在导入一个未转换的ReactComponent。 如何导入ReactComponent而不复制服务器中的代码(重新使用client / bundle.js中的代码)?

为什么我的es6代码在npm安装后不能编译?

我用es6创build了一个npm模块。 你可以在这里看到它在github上。 package.json文件中有一些脚本可以确保es6模块的构build。 在npm模块的上下文(目录)中运行npm publish和npm install时,它起作用。 在另一个项目中运行npm install (即将模块作为依赖项)不会构buildes6模块。 在npm-debug.log文件中似乎也没有任何错误。 我真的很想明白为什么。

另一个文件夹中的Node_modules

我有C:/ Users / user / AppData / Roaming / npm / node_modulespath中的所有节点模块。 然后,我正在尝试为我的脚本webpack添加包含babel和babel-presets的node_modules。 我的webpack.config.js module.exports = { context: './scripts', entry: ['./main', './2.jsx'], output: { path: '../scripts', filename: 'bundle.js', }, resolve: { modulesDirectories: ['C:/Users/user/AppData/Roaming/npm/node_modules'] }, resolveLoader: { root: 'C:/Users/user/AppData/Roaming/npm/node_modules' }, module: { loaders: [{ test: /\.jsx?$/, loader: 'babel-loader', include: 'C:/Users/user/AppData/Roaming/npm/node_modules', exclude: /(node_modules|bower_components)/, query: { presets: ['es2015', […]