标签: transpiler

是否可以配置webpack来执行以下操作:

babel src --watch --out-dir lib

这样一个看起来像这样的目录结构:

- src
  - alpha
    - beta.js
    - charlie
       - delta.js
    - echo.js
    - foxtrot
      - golf
        - hotel.js

将所有文件编译到ES5并在lib目录下以相同的结构输出它们:

- lib
  - alpha
    - beta.js
    - charlie
       - delta.js
    - echo.js
    - foxtrot
      - golf
        - hotel.js

我对所有文件路径进行了全局传递并将它们作为单独的条目传递,但似乎webpack在定义输出文件时"忘记"了文件的位置.Output.path只提供[hash]令牌,虽然Output.file有更多的选项,但只提供[name],[hash]并且[chunk],至少看来,这种编译不受支持.

为了给我的问题一些上下文,我正在创建一个由React组件及其相关样式组成的npm模块.我正在使用CSS模块,所以我需要一种方法将JavaScript和CSS编译到模块的lib目录中.

我正在研究JS库,我想将所有用ES6编写的javascript代码转换为ES5标准,以便在当前浏览器中获得更多支持.

问题是我想将Babel与Gulp任务一起使用,所以我已经安装了所有这些NPM包[ package.json]:

"devDependencies": {
  "@babel/core": "^7.1.2",
  "@babel/preset-env": "^7.1.0",
  "babel-cli": "^6.26.0",
  "gulp": "^3.9.1",
  "gulp-babel": "^8.0.0",
  "gulp-concat": "^2.6.1",
  "gulp-sourcemaps": "^2.6.4",
  "gulp-terser": "^1.1.5"
}

接下来我的.babelrc文件包含以下内容:

{
  "presets": ["env"]
}

而gulpfile.js写入如下:

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');

gulp.task('minify', function () {
    return gulp.src('src/app/classes/*.js')
        .pipe(sourcemaps.init()) 
        .pipe(babel())     // I do not pass preset, because .babelrc do exist
        .pipe(concat('output.js'))   
        .pipe(sourcemaps.write('.'))   
        .pipe(gulp.dest('build/js'))
});

gulp.task('default', ['minify']);

问题是当我 …

我正在我的应用程序Data-Forge Notebook 中实现 TypeScript 支持。

我需要编译、类型检查和评估 TypeScript 代码片段。

编译似乎没有问题，我使用transpileModule如下所示将一段 TS 代码转换为可以评估的 JavaScript 代码：

import { transpileModule, TranspileOptions } from "typescript";

const transpileOptions: TranspileOptions = {
    compilerOptions: {},
    reportDiagnostics: true,
};

const tsCodeSnippet = " /* TS code goes here */ ";
const jsOutput = transpileModule(tsCodeSnippet, transpileOptions);
console.log(JSON.stringify(jsOutput, null, 4));

但是，当我尝试编译有错误的 TS 代码时出现问题。

例如，下面的函数有一个类型错误，但它在没有任何错误诊断的情况下被转换：

function foo(): string {
    return 5;
}

转译很棒，但我也希望能够向我的用户显示错误。

所以我的问题是如何做到这一点，同时还要进行类型检查并为语义错误产生错误？

请注意，我不想将 TypeScript 代码保存到文件中。这对我的应用程序来说将是一个不必要的性能负担。我只想编译和键入保存在内存中的代码片段。

最近，我有必要创建ANTLR语言语法，以实现编译器的目的（将一种脚本语言转换为另一种脚本语言）。在我看来，Google翻译在翻译自然语言方面做得很好。我们拥有各种各样的递归神经网络模型，LSTM和GPT-2，它们会生成语法正确的文本。

问题：是否有足够的模型来训练语法/代码示例组合，以便在给定任意示例源代码的情况下输出新的语法文件？

我正在开发一个名为foobar本地的npm包,允许我实时进行更改或修改,而无需发布/取消发布以改善开发时间和理智.

在projectTest,我foobar通过使用命令链接npm link foobar.如果您不知道,npm链接标志会为您的全局变量创建一个符号链接(您可以在此处阅读更多相关信息:https://docs.npmjs.com/cli/link)

该projectTest恰好是Reactjs项目,写在ES2015,的WebPack,巴贝尔等; 我从'package'导入{x},没有任何问题,等等.

如前所述,foobarnode_modules中存在的包有一个指向其开发目录的链接,但出于某种原因,当我尝试导入时:

import { myFn } from 'foobar'

控制台中抛出以下错误:

/foobar/lib/index.js:3
export const loadImage = () => {
^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)

这是不可取的,因为其他进口工作完美无缺; 为什么在代码也是ES2015的其他现有导入中不会发生这种情况？它没有被提前或转换为静态文件,而是实时AFAIK,因为我有使用babel加载器的webpack设置,如:

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var AssetsPlugin = require('assets-webpack-plugin')
var assetsPluginInstance = new AssetsPlugin()

module.exports = {
  devtool: 'inline-source-map',
  context: path.resolve(__dirname, 'src'), …

我正在使用browserify和babel来转换和捆绑我的脚本.问题是当我使用React 16时,它给了我这个错误信息:

未捕获的错误:Minified React错误#200; 访问http://facebook.github.io/react/docs/error-decoder.html?invariant=200获取完整信息,或使用非缩小开发环境获取完整错误和其他有用警告.

我知道什么是意义,但我已经处于开发模式,而不是生产.

// gulpfile.js
const isProduction = config.environment === 'production';

if(isProduction) {
    process.env.NODE_ENV = 'production';
}
else {
    process.env.NODE_ENV = 'development';
}

console.log(process.env.NODE_ENV);    // it saids: development

function buildJs() {
    let bopts = {
        paths: [
            `${SRC_DIR}/js`,
            `${SRC_DIR}/scss`
        ],
        debug: true
    };
    let opts = Object.assign({}, watchify.args, bopts);

    let b = watchify(persistify(opts))
    .add(`${SRC_DIR}/js/index.js`)
    .on('update', bundle)
    .on('log', gutil.log)
    .transform(babelify, { 
        presets: ["es2015", "react"]
    })
    .transform(scssify, {
        autoInject: true
    });

    function bundle() {
        let stream = …

我的问题不是为什么有些东西不起作用，而是为什么它起作用。是的。

我有一个小型的nodeJS命令行工具，其中包含nodeJS尚不支持开箱即用的功能，最值得注意的是：

\n
• import声明
\n
• String.includes()。
\n

因此，对于交付（构建），我转译+捆绑我的源代码（使用parcel，就像webpack一样）。

令人惊奇的是，我的所有（除了一个）摩卡测试都直接针对我的类而不是捆绑包运行。尽管如此，它们仍然有效！包括很多import说法。并包括“ES6 自测试”：

it( \'String - include\', () => {\n    var s = \'Southern Bananas\'\n    assert( s.includes( \'anana\' ) )\n    assert( !s.includes( \'kiwi\' ) )\n} )\n

因此：

我的测试代码中有 String.include ，而不仅仅是在被测试的源代码中。并且没有地方可以转译或捆绑我的测试代码\xe2\x80\xa6 因此，对我的愚蠢问题表示歉意：

为什么这有效？某处是否有秘密的即时编译？（如果是的话，我也可以将其用于我的可交付测试代码的调试风格吗？）

我的mocha.opts比较简单：

--require @babel/register\n--require ./test/once.js  (nothing special here, either)\n--reporter list\n--recursive\n

我的.babelrc有这个：

{\n    "presets": [\n …

在这个问我这个问题:

如果从另一个模块调用该模块,为什么变异模块会更新引用,但如果从自身调用则不会更新？

我在询问模块变异的本质.

然而事实证明,ES6模块实际上不能被变异 - 它们的所有属性都被视为常量.(见这个答案)

但不知何故 - 当Jest测试模块时 - 它们可以被改变,这就是Jest允许进行模拟的方式.

这是怎么回事？

我想这是一个正在运行的babel插件 - 将模块转换为CommonJS模块？有没有关于此的文件？

有没有办法查看转换后的代码？

让我们从考虑python3.8.5 的语法开始，在这种情况下，我有兴趣弄清楚如何将 python 比较转换为 c。

为了简单起见，我们假设我们正在处理一个非常小的 Python 平凡子集，我们只想转译平凡的 Compare 表达式：

expr = Compare(expr left, cmpop* ops, expr* comparators)

如果我没记错的话，在 python 中，诸如这样的表达式a<b<c被转换成类似a<b && b<cwhere b 只被评估一次的东西......所以我想在 c 中你应该做类似的事情bool v0=a<b; bool v1=v0<c，以防止 b 被多次评估，以防第一条是真的。

不幸的是，我不知道如何将其放入代码中，到目前为止，这就是我所拥有的：

import ast
import shutil
import textwrap
from subprocess import PIPE
from subprocess import Popen


class Visitor(ast.NodeVisitor):
    def visit(self, node):
        ret = super().visit(node)
        if ret is None:
            raise Exception("Unsupported node")
        return ret

    def visit_Expr(self, node):
        return f"{self.visit(node.value)};"

    def visit_Eq(self, node): …

我正在编写一个 TypeScript/React Web 应用程序，它具有以下顶级目录\n结构：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 jest.config.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webpack.config.js\n

所有 TypeScript 源文件都包含在该src/目录中，但我想在编译/类型检查中忽略单个文件（将来可能还会有更多文件）。

我在此文件中遇到错误，但我不想在应用程序中使用该文件。\n我也不想删除该文件，因为它是另一个应用程序使用的模块的一部分。

错误

error TS2307: Cannot find module 'x' or its corresponding type declarations.\n

你能帮我做这个吗？这是tsconfig.json我正在使用的文件：

tsconfig

{\n  "compilerOptions": {\n    "allowJs": true,\n    "emitDecoratorMetadata": true,\n    "esModuleInterop": true,\n    "experimentalDecorators": true,\n    "forceConsistentCasingInFileNames": true,\n    "jsx": "react",\n    "module": "es6",\n    "moduleResolution": "node",\n    "outDir": "./dist",\n    "rootDir": "./src",\n    "skipLibCheck": true,\n    "strict": true,\n    "target": "es5"\n  },\n  "exclude": [\n    "dist/",\n    "jest.config.ts",\n    "webpack.config.js"\n  ]\n}\n