标签: babel

我试图在我的项目中运行一些ES6代码,但我收到意外的令牌导出错误.

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

我的问题是:是什么区别babel-preset-stage-0,babel-preset-stage-1,babel-preset-stage-2和babel-preset-stage-3,什么是最好的选择,当我们发展ES6？

我正在尝试创建一个导出多个ES6类的模块.假设我有以下目录结构:

my/
??? module/
    ??? Foo.js
    ??? Bar.js
    ??? index.js

Foo.js并且Bar.js每个导出一个默认的ES6类:

// Foo.js
export default class Foo {
  // class definition
}

// Bar.js
export default class Bar {
  // class definition
}

我目前的index.js设置如下:

import Foo from './Foo';
import Bar from './Bar';

export default {
  Foo,
  Bar,
}

但是,我无法导入.我希望能够做到这一点,但找不到类:

import {Foo, Bar} from 'my/module';

在ES6模块中导出多个类的正确方法是什么？

当我在Django项目中设置React时,我遇到了这个错误

模块构建中的ModuleBuildError失败(来自./node_modules/babel-loader/lib/index.js):SyntaxError:C:\ Users\1Sun\Cebula3\cebula_react\assets\js\index.js:支持实验语法'classProperties '目前尚未启用(17:9):

  15 | 
  16 | class BodyPartWrapper extends Component {
> 17 |   state = {
     |         ^
  18 | 
  19 |   }
  20 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 
'plugins' section of your Babel config to enable transformation.

所以,我安装了@ babel/plugin-proposal-class-properties并把它放在babelrc中

的package.json

{
  "name": "cebula_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config prod.config.js"
  },
  "keywords": [],
  "author": "", …

我不明白出了什么问题.我检查了其他论坛谈论翻译和巴贝尔.我需要做什么？

node -v
v5.5.0

我的代码:

import recast from 'recastai'

和错误

(function (exports, require, module, __filename, __dirname) { import recast from 'module1'
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:139:18)
    at node.js:999:3

使用Vue(^ 2.0.0-rc.6) + Browserify,入口点是index.js:

import Vue from 'vue'
import App from './containers/App.vue'

new Vue({ // eslint-disable-line no-new
  el: '#root',
  render: (h) => h(App)
})

App.vue:

<template>
  <div id="root">
    <hello></hello>
  </div>
</template>

<script>
import Hello from '../components/Hello.vue'
export default {
  components: {
    Hello
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Hello.vue:

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

空白的白色屏幕,我错过了什么吗？ …

我试着在一个旧项目中使用Babel-loader,我注意到有关babel加载器何时处理包装对象的一些问题,这是它的默认行为吗？我不确定这是一个错误还是我做错了什么,我在谷歌上找不到它,所以这是我的最后一个资源.

我是否需要更改代码才能使其正常工作？

这是我目前的规格:Webpack:3.19.0 babel/core:7.0.0-beta.34 babel-loader:8.0.0-beta.0

如果需要,请参考我的packages.json:

http://paste.ubuntu.com/26187880/

我试着加载包含在函数中的单个文件:

http://paste.ubuntu.com/26187814/

恢复,旧的,这样建立:

(  window.global = { } )();

这是我的webpack配置:

const webpackConfig = {
    context: __dirname,
    entry: {
        app: '../../JavaScript/Namespacing.js'
    },
    module: {
        rules: [
          {
            test: /.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
            }
          }
        ]
    },
    output: {
      path: __dirname + "/../../static/js",
      filename: "[name].js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
}

我得到的错误如下:

Plugin/Preset files are not allowed to export objects, only functions.

那么,我错过了什么吗？

谢谢你的帮助.

最近我开始研究web pack和react-scripts,我想知道使用它们的优缺点以及它们之间的差异.

我建立的WebPack我的阵营项目之间糊涂了babel,babel-core,babel-loader,babel-preset-2015和babel-preset-react.我知道Babel需要将ES7或ES6代码转换为ES5,但在我的package.json安装中我已经安装了所有这些依赖项,除了Babel,它们也是如此devDependencies.

有人可以解释一下这些之间的差异以及为什么我的项目需要所有这些之间的区别？是不是有任何单一的依赖来替换它们？如果他们如此重要,为什么他们被包括在内 devDependencies？

我想让我的第一个Jest Test通过React和Babel.

我收到以下错误:

SyntaxError:/Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less:意外的令牌

    >  7 | @import '../variables.css';
          | ^

我的package.json配置为jest看起来像这样:

"babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": [
      "syntax-class-properties",
      "transform-class-properties"
    ]
  },
  "jest": {
    "moduleNameMapper": {
      "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
      "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
    },
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "verbose": true,
    "modulePathIgnorePatterns": [
      "rpmbuild"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/fbjs",
      "<rootDir>/node_modules/core-js"
    ]
  },

那我错过了什么？