精华内容
下载资源
问答
  • It can parse input string with wildcards to generate transpilers to replace,insert and delete. Here is the usage: <pre><code>csharp class Student { public Student(string name) { Name = name; }...
  • <div><p>A common request we have received in the last couple of months is the ability to enable (or start with) JavaScript transpilers for a given NativeScript project. The usual suspects are ...
  • <div><p>As many are using transpilers today, it would be nice with a some easy integration. Especially with a watch that transpiles on change, such that the web server is actually using the transpiled...
  • Feature/transpilers

    2021-01-07 21:44:35
    <div><p>该提问来源于开源项目:devicons/devicon</p></div>
  • support mocha transpilers

    2020-11-29 00:14:17
    <div><h3>Goal <p>Transpiled code should be covered, either in original or transpiled forms. (SO THAT things like react-jsx, es6 will work) <pre><code> node ./node_modules/mocha/bin/mocha -r blanket --...
  • <p>I had hoped to find a comparison of metapensiero with other transpilers like e.g. <a href="https://github.com/JdeH/Transcrypt">Transcrypt</a> or projects with a similar direction like ...
  • 英文原文 ... 摘译(文章内的代码有些过期,部分改动): Transpilers, orsource-to-sourcecompilers,读取用一个编程语言写的源代码,然后产生相等的另一个语言。 你写的语言被翻译成J...

    英文原文

    https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them

     

    摘译(文章内的代码有些过期,部分改动):

     

    Transpilers, or source-to-source compilers,读取用一个编程语言写的源代码,然后产生相等的另一个语言。

    你写的语言被翻译成JavaScript,被称为compile-to-JS语言。

     

    你可能听说过CoffeeScript或者TypeScrip这类语言。

    CoffeeScript会提供语法糖,非原生JavaScript。

    TypeScript更极端,增加了 classical object-oriented semantics to a fundamentally different language.

    "use strict";
    
    // TypeScript -- JavaScript, with types and stuff
    function printSecret ( secret : string ) {
        console.log("${secret}. But don't tell anyone.");
    }
    
    printSecret("I don't like CoffeeScript.");

     

    问题是JavaScript环境只理解原生js。你不能在控制台写那两种代码,会报告❌。

    甚至在就浏览器,你写一些纯js 代码,仍会报告❌。比如, Template literals就不支持旧浏览器。

     

    因此, transpiler来了,它读取Coffeescript, TypeScript, ES2015, 转化为plain js, 让旧浏览器也支持。

     

    In Defense of Transpilers

    不同的语言开发,有不同的偏好。如 Pythonistas like CoffeeScript. 

    但你可能只喜欢plain js。

     

    不同的浏览器使用不同的js engine。因此使用编译器把你用ES6写的代码转化为所有浏览器都支持的ES5。

    这样,你就可以使用任何功能了。

     

    总之,编译器:

    1. 允许我们写compile-to-JavaScript languages, like CoffeeScript, TypeScript, or ClojureScript;
    2. 让我们使用新的和潜在的js features
    3. Contribute to the development of the ECMAScript specification.

     

    Using Transpilers

    比较流行的编译器是Babel

    本章:

    1. Comparing ES2015 source to transpiled output;
    2. Setting up the Babel command-line interface (CLI); and
    3. A look at how build toolks like Webpack, JSPM, and Babelify streamline the process.

     

    使用 Babel's live transpiler. 在左边窗口写一些包含ES6功能的代码,然后会转化为ES5的代码。

     

    Setting Up the Babel CLI

    To get started:

    1. Create a directory somewhere;
    2. Initialize it as an NPM project;
    3. Install the Babel tool, along with the presets and plugins we'll be using; and
    4. Configure Babel to use those presets and plugins.
    cd && mkdir babel_example &&  cd babel_example
    
    //Node默认的模块管理器,用来按照和管理Node模块。
    //初始化,生成一个新的package.json文件
    npm init
    
    npm install --save-dev babel-cli babel-preset-es2015 babel-plugin-transform-async-to-generator  

     

    安装Babel CLI,

    安装babel-preset-es2015,一组插件集合,用于支持所有的ES2015功能。

    安装babel-plugin-transform-async-to-generator, 可以使用ES7的功能Async await关键字。

     

    备注:原文再往下就说的很模糊。所以网上找了几篇文章,尝试多次,解决。下面是经验总结。

    使用Babel cli详解 (讲解最清楚。)

    阮一峰的入门教程

     

    首先,再项目文件夹根目录下,创建.babelrc。添加:

    //根据需要添加插件和预设的规则集。
    {
        "presets": ["es2015"],
        "plugins": ["transform-async-to-generator"]
    }

     

    然后,创建一个index.js文件,写一些ES6代码。

    最后, npm run babel, 但是报告❌。

    npm ERR! missing script: babel

     

    这是因为非全局安装,所以报告错误。

    修改package.json文件:

    //添加脚本:
       "scripts": {
         "babel": "babel"
       },

    然后再运行, npm run babel,会再屏幕输出index.js的转码。

     

    同样,如果想要使用babel-node命令(提供支持ES6的repl环境。可以直接运行所有的ES6代码),

    //添加脚本,会调用文件babel-node, 执行相关脚本。
       "scripts": {
         "babel-node": "babel-node"
       },

     

    然后npm run babel-node

    > babel_1@1.0.0 babel /Users/chentianwei/babel_1
    > babel-node
    
    >  (x => x * 2)(1)
    2

     

     

    官网的批量转码:

    推荐的方式:

    +   "scripts": {
    +     "build": "babel src -d build"

    项目根目录下,需要建立src和lib目录。(其他目录也可,对应着改)。

    然后输入 

    ~/babel_1 ⮀ npm run build
    
    > babel_1@1.0.0 build /Users/chentianwei/babel_1
    > babel src -d build
    
    src/index.js -> build/index.js

     

    注意⚠️windows下的使用有区别,具体见使用Babel cli详解 


     

     

    使用babel-polyfill实现对ES6新API的支持

    Babel 默认只转码 ES6 的新语法(syntax),而不转换新的 API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign、Array.from)都不会转码。

    如果想让这些方法运行,必须使用 babel-polyfill,为当前环境提供一个垫片。
     
    安装:
    npm install --save-dev babel-polyfill
     

     

    转载于:https://www.cnblogs.com/chentianwei/p/10230652.html

    展开全文
  • <div><p><strong>Describe the Bug</strong></p> <p><code>Version</code> appears to be <code>undefined</code>. <p><strong>Steps to Reproduce</strong></p> <pre><code>ts import { CloudEvent, Version } from...
  • <div><p>I see "Uncaught ReferenceError: System is not defined" <p>I am using "bootstrap 4.0.0-alpha.5" for my project. Please suggest if that worked for you....softsimon/ngx-bootstrap-...
  • <div><p>I am trying to implement this pipeline: <pre><code> pipelines['build-ts'] = [ glob({basePath: "src"}, "**/{*.ts,*.tsx}"... babel6({babelrc: path.resolve("...
  • <div><p>Recently TypeScript's compatibility score was updated and includes + core.js. Perhaps I misunderstand, but this doesn't seem accurate. <p>Since core.js is a library, in theory, I ...
  • <div><p>could you give this branch a shot and let me know if it does the trick for you? <p>Reviewers: </p><p>该提问来源于开源项目:istanbuljs/nyc</p></div>
  • Implement mutation switching

    2020-12-03 03:40:17
    <ul><li>We need to make sure that mutated code can be transpiled by the supported transpilers out there. Webpack, Babel, TypeScript, and friends will have to produce JavaScript to run. This is not ...
  • <p>In order to keep things as fast as possible, transpilers know exactly which file is changed for a mutant. This makes it possible to use the TypeScript "watch source files" feature to not do...
  • ES6_Typescript-源码

    2021-02-18 12:42:18
    Transpilers:ctrl + shft B(选择watch:tsconfig.json以运行将.ts转换为.js文件的Transpilers)在Transpilers中,ES2015将Transpile(使用Traceur / Babel / Typescript)到ES5,以便在所有浏览器中运行 ...
  • Sound wrong to me

    2020-12-09 06:22:03
    2) Type transpilers add more than just types. Typescript add enum, class private, public, protected, build to different target, etc... 3) If transpilers exist and work perfectly, why re-inventing the ...
  • feat: add IE 11 preset

    2020-12-08 19:40:29
    <div><p>IE 11 keeps being a pain for ...s babel config and removing es6 transpilers (for libs like acorn, semver, that drops IE 11)</p><p>该提问来源于开源项目:storybookjs/presets</p></div>
  • Test Closure Compiler

    2020-12-30 08:02:51
    <div><p>Google Closure Compiler support 99% of the ES6 grammar, will be great to compare the results against the other transpilers.</p><p>该提问来源于开源项目:kpdecker/six-speed</p></div>
  • <div><p>It would be really nice to have a function that took a Method and returned a list/enumberable of CodeInstructions for use in Transpilers.</p><p>该提问来源于开源项目:pardeike/Harmony</p>...
  • javascript编译器 介绍 ( ...Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. ...

    javascript编译器

    介绍 ( Introduction )

    Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpile to JavaScript are often called compile-to-JS languages, and are said to target JavaScript.

    Transpiler源到源编译器是读取以一种编程语言编写的源代码,并以另一种语言生成等效代码的工具。 您编写的可转换为JavaScript的语言通常称为“ 编译为JS”语言,并且据说是针对 JavaScript的。

    Oh, and, even though people tend to use "compile/r" and "transpile/r" interchangeably, I'll prefer the latter term in this article.

    哦,即使人们倾向于交替使用“ compile / r”和“ transpile / r”,在本文中我还是更喜欢后者。

    You've probably heard about CoffeeScript and TypeScript. CoffeeScript provides syntactic sugar for a number of features not yet native to JavaScript, while discouraging some of JavaScript's "bad parts". TypeScript is more drastic, adding classical object-oriented semantics to a fundamentally different language.

    您可能已经听说过CoffeeScriptTypeScript 。 CoffeeScript为JavaScript尚未提供的许多功能提供了语法糖,同时不鼓励使用JavaScript的“不良部分” 。 TypeScript更加激进,将经典的面向对象的语义添加到根本不同的语言中

    Anything you can write in JavaScript, you can write in CoffeeScript or TypeScript.

    您可以使用JavaScript编写的任何内容,都可以使用CoffeeScript或TypeScript编写。

    "use strict";
    
    // Good 'ol JS
    function printSecret ( secret ) {
        console.log(`${secret}. But don't tell anyone.`);
    }
    
    printSecret("I don't like CoffeeScript"); 
    "use strict"
    
    # CoffeeScript
    printSecret (secret) =>
        console.log '#{secret}. But don't tell anyone.'
    
    printSecret "I don't like JavaScript." 
    "use strict";
    
    // TypeScript -- JavaScript, with types and stuff
    function printSecret ( secret : string ) {
        console.log("${secret}. But don't tell anyone.");
    }
    
    printSecret("I don't like CoffeeScript.");

    Trouble is, JavaScript environments only understand . . . Well, JavaScript. Trying those last two examples in your console will throw errors. As a matter of fact, if you try that pure JavaScript example in an older browser, you'll still get an error. Template literals still don't have reliable browser support.

    麻烦的是,JavaScript环境只能理解。 。 。 好吧,JavaScript。 在控制台中尝试最后两个示例将引发错误。 实际上,如果您在较旧的浏览器中尝试该纯JavaScript示例,仍然会收到错误消息。 模板文字仍然没有可靠的浏览器支持。

    That's where transpilers come in: They read CoffeeScript, TypeScript, and ES2015, and spit out JavaScript guaranteed to work anywhere.

    那就是编译器出现的地方:他们阅读CoffeeScript,TypeScript和ES2015,并吐出保证可以在任何地方使用JavaScript。

    捍卫转运者 ( In Defense of Transpilers )

    If your workflow doesn't already include a transpiler, you might wonder why you'd even bother. Why learn new syntax and pick up new tools if all we get at the end of the day is the JavaScript we could have written in the first place?

    如果您的工作流尚未包含转译器,您可能会想知道为什么还要打扰。 如果我们最终获得的只是我们本来可以编写JavaScript,为什么还要学习新的语法并使用新的工具?

    In the case of languages that target JavaScript, it's largely a matter of preference or background. Writing in a language that "thinks" the way you do makes you more productive. People with backgrounds in OOP often like TypeScript because it's familiar territory. Pythonistas like CoffeeScript. Clojurists write ClojureScript. You get the idea.

    对于以JavaScript为目标的语言,很大程度上取决于偏好或背景。 用一种“思考”您的工作方式的语言进行写作可以使您的工作效率更高。 具有OOP背景的人们经常喜欢TypeScript,因为它是熟悉的领域。 Pythonista喜欢CoffeeScript。 Clojurist编写ClojureScript。 你明白了。

    But the rest of us, who are perfectly fine with writing plain JavaScript, still use transpilers, because they're the only reliable way to use features from ES2015 and beyond.

    但是我们其余的人,即使可以编写纯JavaScript,也非常满意,但他们仍然使用编译器,因为它们是使用ES2015及更高版本中的功能的唯一可靠方法。

    明天JavaScript,今天 (Tomorrow's JavaScript, Today)

    Anyone who's had to deal with browser compatibility issues before knows its not as simple as writing JavaScript that runs everywhere. That's because every browser uses a different JavaScript engine: Chrome runs V8, Firefox runs SpiderMonkey, and Interet Explorer, Chakra. Each has different performance characteristics, each implements a different subset of ES2015 features, and each is approaching full compliance with the spec at different rates.

    曾经不得不处理浏览器兼容性问题的任何人都知道它并不像编写可在任何地方运行JavaScript那样简单。 这是因为每种浏览器都使用不同JavaScript引擎: Chrome运行V8Firefox运行SpiderMonkey ,以及Interet Explorer Chakra 。 每个都有不同的性能特征,每个实现不同的ES2015功能子集,并且每个都以不同的速率完全符合规范。

    That means that, while our template literal example works just fine for those of you running the most recent Chrome, Firefox, or Safari, it won't work for people running older versions. Or for anyone using Internet Explorer . . . Obviously.

    这意味着,虽然我们的模板文字示例对运行最新版本的Chrome,Firefox或Safari的用户来说效果很好,但不适用于运行较旧版本的用户。 或适用于使用Internet Explorer的任何人。 。 。 明显。

    The ES6 compatibility table shows that, while we're clearly making progress, it's not quite time to write ES2015 directly. Instead, we write our source in ES2015, and let a transpiler translate it to vanilla ES5 that works in every browser. If you need to support browsers from the last millennium, you can even compile down to ES3.

    ES6兼容性表显示,尽管我们正在取得明显进展,但现在还不是直接编写ES2015的时间。 取而代之的是,我们在ES2015中编写源代码,然后让编译器将其翻译为适用于所有浏览器的普通ES5。 如果您需要支持上个千年的浏览器,甚至可以编译到ES3。

    This way, you can use any feature supported by your transpiler of choice, right now, and know that it'll work for everyone who hits your site -- from the public employee with no choice but to use IE8 to the hacker types running a FireFox nightly.

    这样,您就可以使用您所选择的transpiler支持, 现在的任何功能,并知道它会为大家谁击中了你的网站的工作-从政府雇员没有选择,只能使用IE8来运行黑客类型FireFox每晚。

    明天JavaScript,一路走来 (Tomorrow's JavaScript, Along the Way)

    Transpilers also play an important role in guiding the decisions of the TC39 committee, which is the group in charge of designing the ECMAScript standard.

    编译器还在指导TC39委员会的决策中发挥重要作用,TC39委员会是负责设计ECMAScript标准的小组。

    For one, transpilers can contribute directly to the inclusion of a feature in the standard. For a potential feature to move from Stage 1 (Proposal) to Stage 2 (Draft):

    首先,翻译者可以直接为标准中的功能添加做出贡献。 要使潜在功能从第1阶段(建议)移至第2阶段(草案),请执行以下操作:

    Two experimental implementations of the feature are needed, but one of them can be in a transpiler such as Babel.

    需要对该功能进行两个实验性的实现,但是其中一个可以在诸如Babel的编译器中进行。

    The rest of Dr Rauschmayer's overview of the inclusion process is on his 2ality blog..

    Rauschmayer博士对纳入过程的概述的其余部分在他的2ality博客上。

    Probably more important than this contribution is that feedback from users and implementers of transpilers like Babel or Traceur help TC39 iterate on syntax and proposals. This comes up often during TC39 meetings: If you read every line of the TC39 Meeting Notes -- or, you know, just rgrep -i them -- you'll find that Babel was mentioned 36 times, and spot that the conclusion of the March 25, 2015 meeting on This-binding syntax was: "Get more feedback from users of Babel"!

    比这种贡献更重要的是,来自翻译者(例如BabelTraceur)的用户和实施者的反馈帮助TC39迭代了语法和建议。 这通常在TC39会议期间出现:如果您阅读了TC39会议记录的每一行-或者,您知道只是rgrep -i他们-您会发现Babel被提及了36次,并且发现2015年3月25日,关于这种绑定语法的会议是:“从Babel用户那里获得更多反馈”!

    TC39 Meeting Notes: "Get more feedback from users of Babel!

    To recap, transpilers:

    回顾一下,转译者:

    1. Allow us to write compile-to-JavaScript languages, like CoffeeScript, TypeScript, or ClojureScript;

      让我们编写JavaScript编译语言,例如CoffeeScript,TypeScript或ClojureScript;
    2. Let us use new and potential JavaScript features, reliably; and

      让我们可靠地使用新的和潜在JavaScript功能; 和
    3. Contribute to the development of the ECMAScript specification.

      有助于ECMAScript规范的开发。

    Now that we know everything we need to know about what transpilers are, let's dig into how to use them.

    既然我们知道了什么是编译器,我们就需要了解所有内容,接下来让我们深入研究如何使用它们。

    使用编译器 ( Using Transpilers )

    There are a number of ES2015-to-ES5 transpilers out there, but I'll be focusing on Babel.

    有很多ES2015到ES5的编译器,但我将重点介绍Babel

    In this section, we'll cover:

    在本节中,我们将介绍:

    1. Comparing ES2015 source to transpiled output;

      比较ES2015源代码与转换后的输出;
    2. Setting up the Babel command-line interface (CLI); and

      设置Babel命令行界面(CLI); 和
    3. A look at how build toolks like Webpack, JSPM, and Babelify streamline the process.

      看一下Webpack,JSPM和Babelify之类的构建工具如何简化该过程。

    我的来源就是你的来源 (My Source Is Your Source)

    To get started, head over to Babel's live transpiler. Copy the code below into the JavaScript editor (left box):

    首先,请转到Babel的实时翻译机 。 将以下代码复制到JavaScript编辑器中(左框):

    "use strict";
    
    class Planet {
    
      constructor (mass, moons) {
        this.mass  = mass;
        this.moons = moons || 0;
      }
    
      reportMoons () {
        console.log(`I have ${this.moons} moons.`)
      }
    
    }
    
    // Yeah, Jupiter really does have (at least) 67 moons.
    const jupiter = new Planet('Pretty Big', 67);
    jupiter.reportMoons();

    Take a look at the output (reproduced below, for convenience). You'll notice that there are no ES2015 features. const variables get converted to carefully scoped var declarations; class is converted to an old-school function constructor; and the template string desugars to simple string concatenation.

    看一下输出(为方便起见,以下复制)。 您会注意到没有 ES2015功能。 const变量将转换为仔细定义的var声明; class转换为老式函数构造器; 并将模板字符串还原为简单的字符串连接。

    // Everything below is Babel's output.
    'use strict';
    
    var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
    
    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
    
    var Planet = function () {
      function Planet(mass, moons) {
        _classCallCheck(this, Planet);
    
        this.mass = mass;
        this.moons = moons || 0;
      }
    
      _createClass(Planet, [{
        key: 'reportMoons',
        value: function reportMoons() {
          console.log('I have ' + this.moons + ' moons.');
        }
      }]);
    
      return Planet;
    }();

    These are features the language has had from day one. Using them to emulate features from ES2015 is precisely how they let us use non-standardized features now, and to do so safely, to boot.

    这些是语言从一开始就具有的功能。 使用它们来模拟ES2015中的功能正是它们如何让我们现在使用非标准化功能并安全地进行启动。

    As a fun little note, a catch clause creates a scope in JavaScript. This behavior was standardized all the way back in ES3. Traceur took advantage of this for some time to emulate block-scoping, producing something like this:

    有趣的一点是, catch子句在JavaScript中创建作用域。 早在ES3中就一直对此行为进行了标准化。 Traceur在一段时间内利用了这一点来模拟块作用域,从而产生如下内容:

    "use strict";
    
    // ES2015
    {
        let name = "Never woulda thunk.";
    }
    
    // ES3/5 output
    try { throw void 0; } catch(name) {
        name = "Never woulda thunk.";
        console.log(name);
    }

    How's that for a polyfill?

    填充料怎么样?

    设置Babel CLI (Setting Up the Babel CLI)

    The live REPL is slick, but writing your entire codebase that way would suck. Let's save ourselves some work and set up the Babel CLI.

    实时REPL很漂亮,但是用这种方式编写整个代码库会很麻烦。 让我们节省一些工作并设置Babel CLI。

    To get started:

    开始:

    1. Create a directory somewhere;

      在某处创建目录;
    2. Initialize it as an NPM project;

      将其初始化为NPM项目;
    3. Install the Babel tool, along with the presets and plugins we'll be using; and

      安装Babel工具,以及我们将要使用的预设和插件; 和
    4. Configure Babel to use those presets and plugins.

      配置Babel以使用这些预设和插件。
    # This moves to your home directory to create the folder. 
    # If you don't want it there, cd somewhere else.
    cd && mkdir babel_example && cd $_
    npm init
    # Hit ENTER a bunch of times . . . 
    npm install --save-dev babel-cli babel-preset-es2015 babel-plugin-transform-async-to-generator  

    This will install the Babel CLI (babel-cli); a collection of plugins enabling all the ES2015 features that Babel supports (babel-preset-es2015); and a plugin allowing you to use the ES7 proposal, Async functions (babel-plugin-transform-async-to-generator).

    这将安装Babel CLI( babel-cli ); 一系列插件,支持Babel支持的所有ES2015功能( babel-preset-es2015 ); 还有一个插件,可让您使用ES7提案, 异步功能babel-plugin-transform-async-to-generator )。

    To run Babel, you simply type babel <FILENAME>. But before we do that, we need to tell it what plugins to use. Babel looks for this information in a file called .babelrc, in the top level of your NPM project.

    要运行Babel,只需键入babel <FILENAME> 。 但是在我们这样做之前,我们需要告诉它要使用哪些插件。 Babel在NPM项目的顶层的名为.babelrc的文件中查找此信息。

    {
        "presets": ["es2015"],
        "plugins": ["transform-async-to-generator"]
    }

    Now, copy the snippet from above with the Planet class into an index.js, and run babel index.js --out-file index.transpiled.js --source-maps. This will create a transpiled version of index.js, in index.transpiled.js, and a separate sourcemap file, index.transpiled.js.map. A source map is a file that tells the browser which lines of your transpiled code correspond to which lines of your original source, so you can debug index.js directly.

    现在,从上方将Planet类的代码片段复制到index.js ,然后运行babel index.js --out-file index.transpiled.js --source-maps 。 这将创建一个transpiled版本index.js ,在index.transpiled.js ,和一个单独的文件sourcemap, index.transpiled.js.map源映射是一个文件,该文件告诉浏览器转码的哪些行与原始源的哪些行相对应,因此您可以直接调试index.js

    Babel's output in index.transpiled.js

    If you want to transpile your file every time you save changes, you can run:

    如果要在每次保存更改时转换文件,则可以运行:

    babel index.js --out-file index.transpiled.js --source-maps --watch

    babel index.js --out-file index.transpiled.js --source-maps --watch

    制作工具 ( Build Tools )

    There are several other options you can use with the Babel CLI. But, as you can probably imagine, figuring out how to configure them, on top of whatever other tools you're using, can become unwieldly.

    Babel CLI可以使用其他几个选项 。 但是,您可能会想到,在您正在使用的任何其他工具之上弄清楚如何配置它们可能会变得毫无用处。

    For us, running babel --watch is enough. But for any nontrivial project, you'll have a number of build steps: Transpiling, minifiying, organizing your outputs for distribution, determining what needs to be updated, optimizing images . . . It's as much of a nightmare as it sounds like.

    对我们来说,运行babel --watch就足够了。 但是对于任何不平凡的项目,您将有许多构建步骤:编译,最小化,组织输出以进行分发,确定需要更新的内容,优化图像。 。 。 听起来就像一场噩梦。

    If you use the CLI directly, you'd have to run through each step manually, or script the process yourself. That second option is definitely viable, but it can be:

    如果直接使用CLI,则必须手动执行每个步骤,或者自己编写脚本。 第二种选择绝对是可行的 ,但可以是:

    1. Brittle;

      脆;
    2. Difficult for teams; and

      团队困难; 和
    3. Unportable across platforms.

      跨平台不可移植。

    This is where build tools come in. Grunt and Gulp are popular systems that streamline orchestration of the build process. Bundlers and module loaders like Webpack, JSPM, and Browserify -- which you can read about in another article of mine -- take care of transpilation alongside all of the other magic they work.

    这就是构建工具的用武之地。GruntGulp是流行的系统,可简化构建流程的编排。 捆绑程序和模块加载程序(例如WebpackJSPMBrowserify) (您可以在我的另一篇文章中阅读)会与它们工作的所有其他魔术一起处理转堆。

    I've used Browserify to transpile tests written in CoffeeScript to plain JS; delete the output after the tests run; and bundle my code with Babel if they all pass; and put everything in the right place, with source maps, along the way. That's all possible using the command-line tools directly, but it's brittle.

    我已经使用Browserify将以CoffeeScript编写的测试转换为纯JS。 测试运行后删除输出; 并把我的代码和Babel捆绑在一起; 并一路将所有内容和原始地图放在正确的位置。 可以直接使用命令行工具来完成所有操作,但这很脆弱。

    You can trust me on that -- I used to use bash script for this. That Linux diehard coming back to bite me. And if you ever find yourself needing to load multiple module formats or wanting to experiment with hot module replacement, you don't have much choice but to turn to a build system.

    您可以相信我-我曾经为此使用bash脚本。 那个Linux顽固派回来咬我。 而且,如果您发现自己需要加载多种模块格式或想尝试热模块更换 ,则别无选择,只能求助于构建系统。

    Unless you like to roll your own glue code, of course.

    当然,除非您喜欢自己编写胶水代码。

    结论 ( Conclusion )

    It's hard to get away from Transpilers: You need them whether you plan to write a language that compiles to JavaScript, or simply use ES015 reliably. We saw that feedback from people in that latter group is an important source of guidance for the TC39 committee in its decisions about the future direction of JavaScript, as well.

    很难摆脱Transpilers:无论您打算编写要编译为JavaScript的语言,还是可靠地使用ES015,您都需要它们。 我们看到,来自后者的人们的反馈意见对于TC39委员会在决定JavaScript的未来方向方面也具有重要的指导意义。

    We took a look at using the Babel CLI to transpile ES2015 with source maps, and learned about tools that streamline transpilation in more complicated projects.

    我们了解了如何使用Babel CLI将ES2015与源映射一起进行转换,并了解了可简化更复杂项目中的转换的工具。

    Jame Kyle's Babel Handbook is a go-to for everything Babel, and if you're interested in Webpack, read the How-To before wading through its . . . Erm, "suboptimal" documentation.

    Jame Kyle的《 Babel手册》是Babel的入门指南,如果您对Webpack感兴趣,请在仔细阅读How-To之前先阅读一下。 。 。 Erm,“次优”文档。

    Feel free to ask question in the comments, or shoot them to me on Twitter (@PelekeS) -- I'll be sure to get back to everyone individually.

    随时在评论中提问,或在Twitter( @PelekeS上将它们枪杀给我-我一定会单独回信给每个人。

    翻译自: https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them

    javascript编译器

    展开全文
  • mj-源码

    2021-03-07 22:38:02
    mj-Mongo&javascript测试 要将副本存储库安装到您的文件夹中。 npm install 创建文件.env并设置变量: DB_USER = "database user" DB_PASS = "database password" ... 没有ORM(猫鼬),transpilers(babel)等
  • With the use of transpilers it is already possible to use ES6 modules. One of the easiest ways is using Browserify and Babelify.The problem I'm having is how to handle dependency management.In the old...

    With the use of transpilers it is already possible to use ES6 modules. One of the easiest ways is using Browserify and Babelify.

    The problem I'm having is how to handle dependency management.

    In the old days you'd just have some Bower dependencies. The build would bundle non-CDN to vendor.js and project specific files to foobar.js (or whatever).

    So then you'd be able to use the resulting code in a different project by simply bower install foobar --save.

    If both foobar and your new project had a common dependency it would be easily resolved with Bowers flat dependency.

    Now in come ES6 modules:

    Say I have a project foo using lodash. The directory structure is as follows:

    src/js/foo.js

    src/vendor/lodash/dist/lodash.min.js

    And foo.js starts by declaring:

    import * as _ from '../../vendor/lodash/dist/lodash.min.js';

    or (as Browserify wants since Babelify transpiles to CommonJS):

    import * as _ from './../../vendor/lodash/dist/lodash.min.js';

    If I now round up and publish my foo project and start a new project bar that uses foo this will be my directory structure.

    src/js/bar.js

    src/vendor/foo/dist/foo.js

    src/vendor/lodash/dist/lodash.min.js

    But that would not work since the path from foo to lodash is now broken (if I understand Browserify correctly the dot-slash in './blaat/file.js' is relative to the file it's being called from).

    Is some way to import without making any file path assumptions?

    Isn't there some way to indicate multiple source roots? (ie in the above case src/js and src/vendor ... well, ideally you'd just want to state import * as _ from 'lodash';)

    I've only used Browserify with Babelify on cli. Should I be using some other transpiler?

    解决方案

    I think that jspm is the solution your looking for. It will help you out without making file path assumptions when importing modules. It uses the SystemJS dynamic ES6 loader. Watch the video that is posted on their site for a very good explanation on how it all works, Guy Bedford: Package Management for ES6 Modules [JSConf2014].

    展开全文
  • JS Transpilers 如果您想转换静态js资产(在assets/js/ ),则可以这样做。 只需在配置文件中设置babel对象。 这使用此处指定的相同babel配置: : { " babel " : { " presets " : [ " es2015 " ] } } 还记得...
  • Supports ES2015 modules

    2020-11-28 06:57:31
    <div><p>This pull requests adds the cli option <code>--ecma-version</code> to support producing ES6 outputs for use of either modern browsers or for ES6 module aware transpilers, such as rollup and ...
  • s becoming more common for devs to use ES6 transpilers, and our hard coupling with gnode prevents others (like babel) from being used easily (#445) - Some bugs have been really tricky to pin down, (#...
  • Switch to strict mode

    2020-12-26 00:56:45
    <div><p>For use with js packagers and transpilers that throw the global scope into strict mode. <p>Alternative to https://github.com/npm/node-tar/pull/76 closes #74 </p><p>该提问来源于开源项目:...
  • I added a <code>transpilers</code> directory that currently contains two transpilers (<code>babel</code> and <code>typescript). More can be added in the future. <p>I wanted to go ahead and present a ...
  • Transpilers" to "Dialects" because Fengari is a VM rather than a transpiler. Let me know if it would be preferable to create a new section instead.</p><p>该提问来源于开源项目:...
  • scoped scss in vue

    2021-01-10 11:46:55
    <p>it should be working according to https://github.com/fuse-box/fuse-box/blob/master/docs/plugins/transpilers/VueComponentPlugin.md#scoped-styling</p><p>该提问来源于开源项目:fuse-box/fuse-box...
  • bump nyc

    2020-12-01 16:54:16
    - Better support for Babel (and other transpilers) with <code>--require babel-core/register</code>. - Lots of Windows fixes.</p><p>该提问来源于开源项目:tapjs/node-tap</p></div>

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 227
精华内容 90
热门标签
关键字:

transpilers