• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

pbastowski/angular-meteor-babel: Babel 5 ES6 transpiler for angular-meteor (incl ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称：

pbastowski/angular-meteor-babel

开源软件地址：

https://github.com/pbastowski/angular-meteor-babel

开源编程语言：

JavaScript 99.4%

开源软件介绍：

WARNING: this package is deprecated and no longer supported

I suggest users migrate to the native ecmascript package. Here is how one user accomplished this recently:

#33

Babel and ng-annotate in one package

Important information if you have recently updated to v1.0.3 or higher, which introduced configuration through .babelrc. Please rename .babelrc to babel.json, because under certain circumstances Babel reports errors when it encounters a custom keys in babel.rc, such as "verbose". Thus, I have reverted to using babel.json from v1.0.5 onwards. Apologies for any inconvenience.

This package is meant to be used with Angular-Meteor and the corresponding angular package.

If you are not working with angular-meteor then consider using Meteor's own ecmascript package. However, if you do need the extra bits of goodness that this package provides over and above what ecmascript does, then it's ok to use this package also. Even if you're not using AngularJS, it will not harm your code.

Install

meteor add pbastowski:angular-babel

What's in this package that's not in the ecmascript package?

The discussion here is for Meteor 1.2 only.

Here is the list of Babel transformers in this package that are not in the ecmascript package:

  • es5.properties.mutators
  • es6.modules
  • es6.regex.sticky
  • es6.regex.unicode
  • es6.tailCall
  • es6.templateLiterals
  • es7.decorators (stage 1)
  • es7.classProperties (stage 0)
  • es7.exportExtensions (stage 1)
  • es7.comprehensions (stage 0)
  • es7.asyncFunctions (stage 2)
  • es7.doExpressions (stage 0)
  • es7.exponentiationOperator (stage 3)

Please note that all es7 transformers are considered experimental, especially those at Stage 0 and 1.

Custom configuration with babel.json

Place babel.json at the root of your project to override certain default settings. This file is completely optional and may contain the following in JSON format. The values below are the default configuration.

{
    "verbose": false,     // true shows files being compiled
    "debug": false,       // true displays this config file
    "modules": "common",  // what module format Babel should use. See 
                          // Babel documentation for "modules" option.
    "blacklist": ['useStrict'],  // Do not change this unless you know
                                 // very well what you are doing.
    "stage": 0,            // see Babel documentation for stage option.
    "extensions": ["js"]   // "js" means compile all ".js" files.
}

Using import ... from

Babel does not include a module loader, so statements such as below, will not work out of the box

import {x, y, z} from "modulename";

However, if your modules setting is { "modules": "system" } then we can use pbastowski:systemjs to load modules compiled with Babel. For CommonJS modules, which is the default "modules" setting, we can use pbastowski:require.

SystemJS

Meteor 1.2 or higher

So, you have configured Babel through babel.json to output SystemJS modules, like this:

{ "modules": "system" }

Well done! Now you need to know how to use these modules in your code.

SystemJS modules are assigned a name based on their file name within your project. Below are some examples that show how a file name is converted to a module name, which you can import:

file name module name
client/app/app.js client/app/app
client/feature1/feature1.js client/feature1/feature1
client/feature1/lib/xxx.js client/feature1/lib/xxx
client/lib/angular-messages.min.js client/lib/angular-messages.min

Add SystemJS to your Meteor project

meteor add pbastowski:systemjs

Use System.import to kick off your app

Next, in the body section of your index.html file you need to import the JS file that kicks off your application. For our example that file is client/index.js.

<head>
    <title>My App</title>
</head>
<body>
    <app>Loading...</app>
    <script>
        System.import('client/index');
    </script>
</body>

Below is a sample client/index.js file. Remember that the innermost imports, those inside app and feature1, will be executed first. Then, the rest of the code in index.js will be executed in the order it is listed in the file.

In the example below, first client/app/app will be imported and executed followed by client/feature1/feature1.

import 'client/app/app';
import 'client/feature1/feature1';

CommonJS

Meteor 1.1 or higher

When the module format is common, which is the default for this Babel plugin, you don't actually have to do anything special as long as you don't import or export in your ES6 files. Babel will compile your code and output files that will be loaded and executed just like any normal non-compiled JS files would be.

But I really want to import and export

If you use import ... from or export syntax in your ES6 code you may see errors in your dev console complaining about a missing require. To get around that, I have created the package pbastowski:require, which implements just enough of require and module.exports to enable you to export and import in Meteor apps.

Try it and see if it works for you:

meteor add pbastowski:require

More info about Babel please...

See the Babel website

Troubleshooting

Meteor refuses to install the latest version of this package

If Meteor refuses to update your package to the latest Meteor 1.2 version, you may have to convince it to do so like shown below. Change the version number to whatever version that you actually want.

meteor add pbastowski:[email protected]

For Meteor 1.1, what is the latest version of this package?

The latest version of pbastowski:angular-babel for Meteor 1.1 is 0.1.10

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
iptop/babel-plugin-proposal-pattern-matching: the minimal grammar, high performa ...发布时间：2022-04-13
下一篇：
Coding Dojo发布时间：2022-04-13
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap