• 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
  • 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...






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





    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.");



    甚至在就浏览器,你写一些纯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



    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
    npm init
    npm install --save-dev babel-cli babel-preset-es2015 babel-plugin-transform-async-to-generator  


    安装Babel CLI,


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



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




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



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

    npm ERR! missing script: babel




       "scripts": {
         "babel": "babel"

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



    //添加脚本,会调用文件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)





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



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

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



  • <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. ...


    介绍 ( 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.


    "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.


    捍卫转运者 ( 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,今天 (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.


    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.


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


    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;

    2. Let us use new and potential JavaScript features, reliably; and

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


    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.


    In this section, we'll cover:


    1. Comparing ES2015 source to transpiled output;

    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.


    我的来源就是你的来源 (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);

    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.";

    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;

    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.

    # 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


  • 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:



    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.




    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