标签: babeljs

我的目标是在页面/父组件上动态添加组件.

我从一些基本的示例模板开始,如下所示:

main.js:

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));

App.js:

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <div id="myId">myId div</div>
            </div>

        );
    }

});

SampleComponent.js:

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component! </h1>
            </div>
        );
    }
});

这里SampleComponent安装到SampleComponent节点,该节点在App.js模板中预先编写.但是如果我需要向App组件添加无限数量的组件呢？显然我不能让所有必需的div坐在那里.

在阅读了一些教程后,我仍然不了解如何创建组件并动态添加到父组件.这样做的方法是什么？

这似乎应该是相对简单的事情,但唉.

我有ES6课程:

'use strict';

export class BaseModel {  
    constructor(options) {
        console.log(options);
    }
};

和使用它的根模块:

'use strict';

import {BaseModel} from './base/model.js';

export let init = function init() {
    console.log('In Bundle');
    new BaseModel({a: 30});    
};

我的目标是:

1. 通过Babel传递上述内容,获取ES5代码
2. 用webpack打包模块
3. 能够调试结果

经过一些试用,这是我的webpack配置:

{
    entry: {
        app: PATH.resolve(__dirname, 'src/bundle.js'),
    },
    output: {
        path: PATH.resolve(__dirname, 'public/js'),
        filename: 'bundle.js'
    },        
    devtool: 'inline-source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel'
            }
        ]        
    }
}

这似乎在某种程度上起作用.

所以,我可以这样做:

我可以单击F11并输入代码,但我无法评估BaseModel:

这有点挫败了调试的目的(或目的之一).

我试着加入source-map-loader各种顺序有 …

我按照Babel '入门'页面的说明安装了babel-cli工具.

从我的项目文件夹中的终端:

npm install --save-dev babel-cli

在此之后,有一个带有babel-cli文件夹的node_modules目录,但是没有创建package.json.npm还显示以下错误:

npm WARN enoent ENOENT: no such file or directory, open '/Users/MyName/Sites/Tutorials/Babel2/package.json

当试图运行babel时,我明白了:

babel src -d lib
-bash: babel: command not found

我安装了最新版本的nodejs/npm.我运行了npm update -g,我编辑了我的.bash_profile文件,包括:

export PATH=$PATH:/Users/MyName/npm/bin
export PATH=/usr/local/share/npm/bin:$PATH

我没有使用浏览器等其他npm工具.为什么巴贝尔不被认可？

我的节点webpack项目使用三个babel库.它们之间有什么区别？它们是如何被使用的？

"dependencies": {
  "babel-runtime": "^5.8.24"
}

"dev-dependencies": {
  "babel": "^5.8.23",
  "babel-core": "^5.8.23"
}

尝试使用 nextjs npm run dev 运行命令时显示错误 - 无法加载 SWC 二进制文件，请在此处查看更多信息： https: //nextjs.org/docs/messages/failed-loading-swc。

我尝试卸载节点并使用版本 16.13 重新安装它，但没有成功，在 vercel 页面上，但到目前为止不成功。有小费吗？

另外，我注意到这是 NextJS 讨论页面上的一个当前问题，它与新的基于 Rust 的编译器有关，它比 Babel 更快。

我试图Object.assign()在Babel使用webpack编译的ES6 Web应用程序中使用,但是我收到一个错误:

Uncaught TypeError: Object.assign is not a function

我已经babel-loader习惯将ES6转换为ES5,所以我所有的其他ES6代码都在工作.然而,Object.assign()只有import "babel-core/polyfill"在我的代码库之后才能工作.我看到我也可以通过导入babel-runtime来解决这个问题,但是我想了解为什么 Object.assign()需要的不仅仅是babel-loader执行 - 不应该babel-loader预处理所有内容,包括Object.assign()？

我曾经在仅使用 JavaScript 来使用 Jest 时解决了类似的错误，但目前我无法使用 Typescript 来解决类似的错误。

我的所有测试都运行良好，直到我安装了需要@types/jest-environment-puppeteer,@types/puppeteer和的 Puppeteer @types/expect-puppeteer。

安装它们后，puppeteer 测试运行完美，但其他测试开始失败并出现以下错误。

  D:\...\api\node_modules\uuid\dist\esm-browser\index.js:1    
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
                                                                                      ^^^^^^  

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1796:14)   
      at Object.require (../node_modules/@nestjs/common/decorators/core/injectable.decorator.js:4:16)

我做了什么？

allowJs: true打开tsconfig.json并设置transformIgnorePatternson jest 配置。这样笑话就可以从node_modules/ 之后编译文件，此错误停止但测试因另一个奇怪的原因失败。更糟糕的是，测试开始时间增加太多。

所以我保留了allowJs原始设置并更新了笑话配置

"transform": {
   "^.+\\.(t|j)s$": "ts-jest"
}

到

"transform": {
   "^.+\\.(t)s$": "ts-jest"
}

所以目前 ts-jest 不编译 js 文件。但我认为我无法让 babel 选择js文件的转换。这些是我的笑话配置：

{
  "moduleFileExtensions": ["js", "json", "ts"],
  "rootDir": ".",
  "testEnvironment": …

我已经安装了最新版本的babel.目前6.4.0.我创建了一个名为myclass.js的文件,其中包含以下代码.

class MyClass {
    constructor(name) {
        console.log("I am a MyClass object .. ", name);
    }
}

var myclass = new MyClass('1234');

创建我的类后,我在命令行中执行以下操作.

$> babel ./src/myclass.js --out-file ./out/app.js

我希望我的app.js文件有es5编译的javascript,但它具有与myclass.js文件相同的精确代码.我错过了什么可能导致这种情况？

Error: Missing class properties transform

Test.js:

export class Test extends Component {
  constructor (props) {
    super(props)
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

.babelrc:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-class-properties"]
}

package.json:

"babel-core": "^6.5.1",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.5.2",

我已经浏览了网页并且所有修复都围绕着:升级到babel6,将"stage-0"的顺序切换为"es2015"之后.我所做的一切.

有一个引入C#风格的建议async-await.我知道Babel.js将ES6转换为ES5,但有没有办法让它变得异步 - 等待到ES5？