标签: babeljs

我需要添加一个 objectProperty，但它需要键和值：

t.objectProperty(key, value, ...)

并且该值必须是“表达式”。我假设它必须是对象表达式：

t.objectExpression(属性)

其中“属性”必须是一个 ObjectMethod 数组 || 对象属性 || 传播属性。

但我想首先创建一个 ObjectProperty ！那么什么是“表达式”以及如何创建它以创建 ObjectProperty？

假设我有一个'cheap-module-inline-source-map'如下所示的字符串：

在Atom 中，我希望能够双击该字符串来选择整个字符串。然而，它只让我选择我点击的词。

我确实在“设置”>“编辑器”中找到了以下内容：

原来是 /\()"':,.;<>~!@#$%^&*|+=[]{}?-…

我删除了-但这并没有解决问题。

我在将 id 传递给 handleClick 函数并将其 console.log'ing 到控制台时遇到问题。我试过简单的例子，但我不明白为什么它在我的实现中不起作用。

这是工作示例的代码：

	var obiekt = [{"Zdjecie":"http://i.imgur.com/A83qNiV.jpg"},{"Zdjecie":"http://i.imgur.com/wwOoOIc.png"}];
class NavbarList extends React.Component {
 constructor() {
    super();
    this.state = {
      text: "Old Text",
      id: 0,
	  isPasswordPage : false,
      isUsernamePage : true
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    const {id} = event.target;
    console.log(id);

    this.setState({
       text: "New text",
       id: event.target.id,
	   isPasswordPage : true,
      isUsernamePage : false
	   
    });
	}
	  passwordpage(){
    return(

        <div className="mainapp">
          <h2>{this.state.id}</h2>
          <div>
            {obiekt.map((obj, index) =>{
				if(index == this.state.id) return (
				<div  key = {index}>
				<img src= …

我想在运行时使用 Node.js 执行 ES6 代码。给定一串代码：

const es6code = 'const square = (b) => { return b * b; }';
es6Eval(es6code)(5)

该es6Eval函数会将 es6 转换为 es5 并在运行时评估代码。

我该怎么做呢？

在我的本地环境中，unicode 字符工作正常，但是当我运行 webpack 进行捆绑和部署时，类似于“\uf00c”的字符串变成了“？” 在 index_bundle.js 中

我认为 babel 配置或 webpack 配置存在问题，但我无法解决它，因为我是整个堆栈的新手。

这是代码：

<Label className="switch switch-icon switch-pill switch-success">
   <Input type="checkbox" className="switch-input" defaultChecked onChange={this.handleActivateUser.bind(this, user.id)}/>
      <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
      <span className="switch-handle"></span>
</Label>

我的 .babelrc：

{
   "presets": [
     ["env"], ["react"]
   ],
   "plugins": ["transform-class-properties", "transform-object-rest-spread"]
}

还有我的 webpack.config.js：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
const webpackUglifyJsPlugin = require('webpack-uglify-js-plugin');
var webpack = require('webpack');
config …

我的项目的一个依赖项是使用箭头函数，我似乎无法让 babel-loader 转译外部依赖项。

我的模块部分看起来像

module: {
        rules: [
            {test: /\.(js|jsx)$/, loader: 'babel-loader'}
        ]
    }

我最初在规则对象中有 exclude: /node_modules/(?!superagent)/ ，但删除了它以确保它不是正则表达式问题。

.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}

索引.js

import superagent from 'superagent'

superagent.get('http://www.google.com')
    .then(result=>console.log('done'))
    .catch(e=>console.error(e));

在这种情况下，有问题的依赖是 superagent

我用显示问题的配置创建了一个最小的 repo https://github.com/ksmith97/WebpackIssue

我不确定这里还有什么可以尝试的

编辑：要清楚这是为了 IE 11 支持。

Vue CLI 3 / Webpack 如何处理对旧浏览器的支持？基本上，我的 Vue 应用程序在 iPhone 7/8 和 Chrome 桌面（最新版本）上运行得非常好。但是在 iPad 2 (iOS 9.?) 上进行测试时，它只显示来自 css 文件的背景，仅此而已 - 除了空白屏幕之外别无他物。这发生在我迄今为止制作的两个完全独立的网络应用程序上，所以我认为这不是编码错误。我在想我需要在vue.config.js文件中添加一些东西来支持旧浏览器吗？我看不出这是一个 css 问题，因为我没有使用grid或任何现代的东西 - 只是基本的 css，无论如何都是自动前缀的。请评论任何关于为什么它不起作用的想法！谢谢

我知道有很多类似的问题，但我没有找到解决方案，而且其中一些问题很旧，因此不适用。

我为 React 创建了一个 Webpack 环境，但不编译 JSX 语法。

我正在使用：

"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",

在我的 babel.config.js 我有：

  ...
  'presets': [
    [
      '@babel/preset-env',
      {
        'targets': {
          'chrome': 61,
        },
        'modules': false,
        'useBuiltIns': 'usage'
      },
      '@babel/preset-react'
    ]
  ],
  ...

我可以像这样编译反应代码：

import React from 'react'
import ReactDOM from 'react-dom'
require('./scss/main.scss')

const e = React.createElement

class LikeButton extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      liked: false
    }
  }

  render () {
    if (this.state.liked) {
      return 'You …

我收到以下错误。想不出解决办法。我发现很多帖子在这里看起来是重复的，但是没有任何效果。

喜欢：需要 Babel "7.0.0-0" 但加载了 "6.26.3"

node_modules@babel\helper-plugin-utils\lib\index.js

抛出 Object.assign（错误，{

错误：需要 Babel "^7.0.0-0"，但加载了 "6.26.3"。如果你确定你有一个兼容版本的@babel/core，很可能是你的构建过程中加载了错误的版本。检查此错误的堆栈跟踪以查找未提及“@babel/core”或“babel-core”的第一个条目，以查看调用 Babel 的内容。

以下是我的 package.json

"dependencies": {
    "express": "^4.16.4",
    "isomorphic-fetch": "^2.2.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-redux": "^5.1.1",
    "react-router": "^4.3.1",
    "react-router-config": "^1.0.0-beta.4",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^24.0.0",
    "babel-loader": "^7.1.5",
    "css-loader": "^1.0.1",
    "cypress": "^3.1.3",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "enzyme-to-json": "^3.3.5",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.0.0",
    "jest-fetch-mock": "^2.0.1",
    "json-loader": …

谁能向我解释为什么

import { React } from 'react';

打破一切，但

import React from 'react';

工作正常吗？他们说的不是同一件事吗？我试图在文档和互联网的其他地方找到答案，但我无法弄清楚。我觉得可能跟 Babel 有关系吧？

如果有帮助，这是我的 npm 包：

"dependencies": {
    "moment": "^2.18.1",
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.0.0",
    "styled-jsx": "^3.2.1",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.13.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-react": "^7.5.1",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.29.0",
    "react-hot-loader": "^3.0.0-beta.7",
    "url-loader": "^0.6.2",
    "webpack": "^3.4.0",
    "webpack-dev-server": "^2.5.0"
}