标签: babel

问候一个,所有,

我一直在玩Webpack的Bootstrap,但我正在把我的头发撕掉.我从字面上通过博客文章的负荷了,他们要么使用7个月过时"自举的WebPack"插件(其中,令人惊讶的不开箱的)或.它们包括引导文件通过进口"node_modules/*/自举/ CSS/bootstrap.css'.

当然,必须有一种更清洁,更有效的方法来解决这个问题吗？

这是我目前的webpack.config.js档案:

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src/js/main.js')
    },
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
            exclude: /(node_modules|bower_components)/
        }, {
            test: /\.css$/,
            loaders: ['style', 'css']
        }, {
            test: /\.scss$/,
            loaders: ['style', 'css', 'postcss', 'sass']
        }, {
            test: /\.sass$/,
            loader: 'style!css!sass?sourceMap'
        },{
            test: /\.less$/,
            loaders: ['style', 'css', 'less']
        }, {
            test: /\.woff$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
        }, {
            test: …

我在我的JavaScript应用程序中使用ES6模块.源代码是用webpack和babel编译的.这是文件的缩短版本,这会给我带来麻烦:

export const JUST_FORM = 0;
export const AS_PAGE = 1;

console.log(AS_PAGE); // **

export default function doSomething(mode = AS_PAGE) {
  console.log(mode);
  console.log(JUST_FORM);
}

我正如您期望的那样使用此功能.

import doSomething, { AS_PAGE } from './doSomething'

console.log(AS_PAGE);

doSomething();

当我运行的应用程序,它打印三次undefined且仅一次的预期值AS_PAGE也就是console.log标记**.但是,这是最后打印的!它表明:

• AS_PAGE当用作doSomething函数`的默认参数时,常量在定义函数时未定义.
• 在JUST_FORM当常量没有定义doSomething被调用.
• 在AS_PAGE明确的导入时没有定义的常量.

显然,这里发生的事情是只有default导出被解析和评估,文件的其余部分将被忽略,直到稍后.我在我的应用程序中的几个不同位置导入此文件(此时此刻非常大),并且在某些时候这些值实际上可用.从控制台输出来看,这是时间问题,但它可能有不同的原因.显然,我在所有地方都以完全相同的方式进口.

无论如何,我已经编写了我的整个应用程序,假设一旦我导入了一些东西,它立即可用,我可以在我的代码中使用它.我(简要地)阅读了ES6模块应该如何工作,我没有找到任何可以证明这个假设错误的东西.它一直在努力.

另请注意,当我运行它webpack-dev-server或将其编译为单个包时,行为是相同的.

这种行为是否真的正确？可能有什么责任呢？

我正在使用Babel 7和Webpack 4进行一个Web项目.我之前从未使用过Babel,也无法真正理解它的某些部分.基于我正在使用的文档,@babel/preset-env因为它似乎是推荐的方式(特别是对于初学者).还通过我的.browserslistrc文件使用浏览器列表集成.

Webpack编译好(babel-loader版本8.0.2),我没有错误,但我对useBuiltIns: "entry" 这里提到的这个选项以及polyfill系统如何在Babel中工作感到困惑.

.babelrc.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry" // do I need this?
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
};

.browserslistrc
从这里复制(认为​​合理,因为我的项目使用的是Bootstrap).

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

所以我的问题是: …

我使用sublime text 3作为我的代码编辑器,我在React中编写了一个基本的hello world示例.但是代码上的着色是不合适的,我尝试过安装Babel插件但是即使在那之后着色似乎也不起作用,如您所见,下图

我有一个babel文本突出显示我添加到我的崇高.但是,每次我打开一个新的反应项目时,它默认为javascript文本突出显示然后我必须重置每个javascript文件以获得正确的文本突出显示.正如您在我的屏幕截图右下角所见,它默认设置为javascript.

我正在推出一个反应应用程序,这是我的Webpack配置:

'use strict'

const ExtractPlugin = require('extract-text-webpack-plugin')
const HTMLPlugin = require('html-webpack-plugin')
module.exports = {
    devtool: 'eval',
    entry: `${__dirname}/src/main.js`,
    output: {
        filename: 'bundle-[hash].js',
        path: `${__dirname}/build`,
        publicPath: '/',
    },
    mode: 'development',
    performance: {
        hints: false
    },
    plugins: [
        new HTMLPlugin(),
        new ExtractPlugin('bundle-[hash].css'),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_module/,
                loader: 'babel-loader',
            },
            {
                test: /\.scss$/,
                loader: ExtractPlugin.extract(['css-loader', 'sass-loader']),
            },
        ],
    },
}

然后,我有一个package.json文件,这里是依赖项:

"devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "and": "0.0.3",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge.0", …

我有一个应用程序，它是一个节点后端和一个反应前端。

当我尝试构建/运行节点应用程序时出现以下错误。

节点： v10.13.0

错误：

dist / index.js：314 regeneratorRuntime.mark（function _callee（productId）{^

ReferenceError：未定义regeneratorRuntime

.babelrc

{
    "presets": [    [
        "@babel/preset-env", {
          "targets": {
            "node": "current"
          },
        }
      ], "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

webpack.config.js

{
        mode: "development",
        entry: "./src/index.js",
        target: "node",
        externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
        stats: {
            colors: true
        },
        devtool: "source-map",

        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "index.js",
            sourceMapFilename: "index.js.map"
        },
        module: {
            rules: [
                {
                    enforce: "pre",
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: …

我有一个节点应用程序,我想在Docker容器中托管,这应该是直截了当的,如本文所示:

https://nodejs.org/en/docs/guides/nodejs-docker-webapp/

但是,在我的项目中,源不能直接运行,必须从ES6和/或Typescript编译.我使用gulp与babel,browserify和tsify一起构建 - 使用不同的浏览器和服务器设置.

在这种情况下,构建和自动化 docker镜像的最佳工作流程是什么？网络上是否有描述此类工作流程的资源？如若Dockerimage做建成后npm install,或者我应该创建一个shell脚本来完成这一切,简单的让Dockerfile收拾它一起？

如果Dockerfile应该进行构建 - 图像需要包含所有dev-dependencies,这是不理想的？

注意:我已经能够设置一个docker容器并运行它 - 但是这需要预先安装和构建所有文件.

我正在使用babel-preset-env版本 - 1.6.1为我的反应应用程序,我在IE上收到错误: - 对象不支持属性或方法'assign'

这是我的.babelrc: -

{
"presets": [
    "react",
    [
        "env",
        {
            "targets": {
                "browsers": [
                    "last 1 versions",
                    "ie >= 11"
                ]
            },
            "debug": true,
            "modules": "commonjs"
        }
    ]
],
"env": {
    "test": {
        "presets": [
            [
                "babel-preset-env",
                "react"
            ]
        ],
        "plugins": [
            "transform-object-rest-spread",
            "transform-class-properties",
            "transform-runtime",
            "babel-plugin-dynamic-import-node",
            "array-includes",
            "url-search-params-polyfill",
            "transform-object-assign"
        ]
    }
},
"plugins": [
    "transform-object-rest-spread",
    "transform-class-properties",
    "syntax-dynamic-import",
    "transform-runtime",
    "array-includes",
    "url-search-params-polyfill",
    "transform-object-assign"
]

}

我试过这些polyfills: -

https://babeljs.io/docs/plugins/transform-object-assign/ https://www.npmjs.com/package/babel-plugin-object-assign

但它不起作用

我正在使用语法: -

let a …

到目前为止,我一直试图使用env预设失败.我浏览,其他人已经提出了这样的问题的git 这个,并采取了一些那似乎为别人工作的建议,但至今没有运气.

这是我正在使用的:

的package.json

"bundle": "browserify ./client/app.js -d -o ./public/o.js -t [ babelify --presets [ env ] ]",
"devDependencies": {
  "@babel/cli": "^7.0.0-beta.40",
  "@babel/preset-env": "^7.0.0-beta.40",
  "babel-core": "^6.26.0",
  "babelify": "^8.0.0"
...

这是错误:

Error: Couldn't find preset "env" relative to directory "/Users/user/Documents/git/ts/client" while parsing file: /Users/user/Documents/git/ts/client/app.js

我可能遗失的任何东西？