我在js文件中执行以下操作

    var FS = require('fs');
    var TestGoogle = eval(FS.readFileSync('../loader.js', 'utf8'));

我添加到我的webpack配置：

node: {
  fs: "empty"
}

webpack使用Babel编译，但是在js控制台中出现错误

FS.readFileSync is not a function

为什么是这样？我只想导入一个javascript文件。特别是为了使用谷歌的材料条形图。https://developers.google.com/chart/interactive/docs/gallery/barchart#creating-material-bar-charts

在香草js中，我需要

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});

然后，如本教程所述，请使用google.charts.Bar而不是google.visualization.BarChart。不幸的是，我无法让这个简单的原始JS与Node.js，Babel和Webpack完美地结合使用。

从React和Flux架构开始,但遇到了一些基础设施问题.

我无法访问流浪盒(scotch-box)上webpack-dev-server启动的网页.该命令在localhost:3002上启动应用程序,我的vagrant box在Windows主机中有一个IP(192.168.33.10)地址,我可以访问它.但是当我尝试访问192.168.33.10:3002时,我收到错误:" 无法访问该页面...... "

我检查过我可以从流浪盒控制台访问页面curl http://localhost:3002.

有没有人有任何想法为什么会这样？

我也在使用es2015的babel和presets并做出反应.

这是webpack配置文件:

module.exports = {
    entry: "./src/js/main.js",
    output: {
        path: "./dist",
        filename: "bundle.js",
        publicPath: "/"
    },
    devServer: {
        inline: true,
        port: 3002,
        contentBase: "./dist"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel",
                query: {
                    presets: ["es2015", "react"]
                }
            }
        ]
    }
};

这是我的 package.json

{
  "name": "flux-jenezis",
  "version": "1.0.0",
  "description": "Flux realisatoin usign egghead guide",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "keywords": [
    "flux",
    "react" …

我正在创建两个webpack包:vendors.dll.js和client.js.

供应商是使用webpack.DllPlugin创建的.它包括所有前端模块node_modules/.这很有效.

客户包括我的应用代码.它使用webpack.DllReferencePlugin委托给供应商的DLL.这很有效.

客户端运行所有的JavaScript通过babel-loader.我正在使用babel-plugin-transform-runtime插件,这会导致整个core-js内容被编译到我的客户端包中.我更喜欢将这些东西移到DLL中,因为它不会像应用程序那样频繁地改变.

AFAIK你不能只包含babel-runtime在DLL中(我试过这个).从我可以告诉核心-js的东西加载更直接,而babel-runtime甚至没有main我能说的东西.

Babel:6.x Webpack:1.x

如果需要解决问题,很高兴提供实际配置.

webpack -p cli命令无法验证es2015代码

的package.json

  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2"
  }

webpack.config.js

var webpack = require("webpack");

var config = {
    entry: './src/app.js',
    devtool: "source-map",
    output: {
        path: '../Scripts',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                },
                include: ["./src"],
                exclude: /node_modules/
            }
        ]
    }
}

module.exports = config;

运行时出错 webpack -p

ERROR in bundle.js from UglifyJs
Unexpected character '`' [./src/LineEndRenderer.js:33,0]

(es2015模板字符串使用)

跑步webpack -d很好.

我有一个只有几个月的项目,我决定在ES6中编写它以学习新系统.(我很喜欢).该项目是一个复杂的WebGL渲染器.

最初我只是在浏览器中使用es6(不使用模块功能),只是在我的HTML中使用了很多import语句(丑陋).随着课程数量的增加,这变得无法控制.

现在我第一次学习webpack和babel.我的目标是将所有模块以es5或es6格式组合在一起.

我使用webpack将我的代码转换为单个es5(CommonJS)模块.所有功能都保持不变.好极了!

但是,在某些情况下,性能已经大大降低.我的一些代码运行速度只有它已转换为es5的一半.(这违反了我在本页中看到的数据https://kpdecker.github.io/six-speed/).

我想使用Webpack测试而不转换es6 - > es5.基本上只是利用webpacks将我的模块捆绑到一个文件中的能力.

我对webpack完全不熟悉,而且我一直试图弄乱babel转换代码的方式,但无法弄清楚如何简单地禁用大多数转换.我唯一想要转变的是模块导入/导出.

任何人都可以帮我解决这个问题吗？

PS我认为我的项目指出es6在某些现实世界的用例中要比es5快得多,并且有助于证明我决定从一开始就使用es6.

我以为我收到了这个错误,因为我没有ojdbc14.jar部署内部<jbossas.home>/common/lib.在我这样做之后,这个问题仍然存在.

堆栈跟踪

    HTTP Status 500 -

type Exception report

message

description The server encountered an internal error () that prevented it from fulfilling this request.

exception

javax.persistence.PersistenceException: org.hibernate.exception.GenericJDBCException: Cannot open connection
    org.hibernate.ejb.AbstractEntityManagerImpl.throwPersistenceException(AbstractEntityManagerImpl.java:614)
    org.hibernate.ejb.QueryImpl.getResultList(QueryImpl.java:76)
    gov.medicaid.services.impl.RegistrationServiceBean.findByUsername(RegistrationServiceBean.java:156)
    sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)

root cause

org.hibernate.exception.GenericJDBCException: Cannot open connection
    org.hibernate.exception.SQLStateConverter.handledNonSpecificException(SQLStateConverter.java:126)
    org.hibernate.exception.SQLStateConverter.convert(SQLStateConverter.java:114)
    org.hibernate.exception.JDBCExceptionHelper.convert(JDBCExceptionHelper.java:66)
    org.hibernate.exception.JDBCExceptionHelper.convert(JDBCExceptionHelper.java:52)
    org.hibernate.jdbc.ConnectionManager.openConnection(ConnectionManager.java:449)
    org.hibernate.jdbc.ConnectionManager.getConnection(ConnectionManager.java:167)
    org.hibernate.jdbc.AbstractBatcher.prepareQueryStatement(AbstractBatcher.java:161)
    org.hibernate.loader.Loader.prepareQueryStatement(Loader.java:1573)
    org.hibernate.loader.Loader.doQuery(Loader.java:696)

root cause

org.jboss.util.NestedSQLException: Unable to get managed connection for MitaDS; - nested throwable: (javax.resource.ResourceException: Unable to get managed connection for MitaDS)
    org.jboss.resource.adapter.jdbc.WrapperDataSource.getConnection(WrapperDataSource.java:95)
    org.hibernate.ejb.connection.InjectedDataSourceConnectionProvider.getConnection(InjectedDataSourceConnectionProvider.java:46)
    org.hibernate.jdbc.ConnectionManager.openConnection(ConnectionManager.java:446) …

当尝试使用gulp-webpack将jsx / js转换为浏览器级别时，我一直收到此问题。

我已经将NPM和nodeJS更新为当前最新版本（3.8.9和6.1.0）

它输出的错误是：

找不到输入模块中的错误：错误：无法在C：\ xampp \ htdocs \ project \ tools中解析模块'babel'

奇怪的是，它正在正确的文件夹中查找（node_modules文件夹在此目录中），但根本找不到它。

我的文件夹结构分为3个文件夹，分别是

• 应用程式
• src
• 工具

所述应用程序文件夹中包含的浏览器级代码（JS / CSS）

在src文件夹中包含高级语言（SCSS / JSX）

该文件夹工具包含我gulpfile，node_modules，的package.json，bower.json和bower_components

我的gulp任务，用于将jsx / js转换为浏览器级别

gulp.task('react', function() {
return gulp.src('../src/js/react/index.js')
.pipe(webpack({
  entry: 
    {
      app: './../src/js/react/index.js'
    },
  output: {
    path: __dirname + "../app/js/react",
    publicPath: '/',
    filename: 'bundle.js'
  },

  module: {
    loaders: [{
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      cacheDirectory: true,
      query: {
        presets: [
          'babel-preset-es2015',
          'babel-preset-react'
        ].map(require.resolve)
      }
    }]
  },

  resolveLoader: {
        modulesDirectories: [ …

最近我将我的一个项目转换为webpack和babel.它由淘汰组件制成.

我在运行单元测试时遇到了问题.如果我在tests文件夹中有一个文件, 比如

import component from '../custom-options';

test('adds 1 + 2 to equal 3', () => {
  expect(3).toBe(3);
});

问题是组件是一个需要排序的模块

var htmlString = require('./custom-options.html');

当我尝试运行网站本身它运行正常,因为原始加载器配置为此需要.但是,当我运行jest测试输出时:

 custom-options.html:1
 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){?<div id="custom-options-containe" class="mod--custom-options">
                                                                                          ^
SyntaxError: Unexpected token <

  at transformAndBuildScript (node_modules\jest-cli\node_modules\jest-runtime\build\transform.js:284:10)
  at custom-options.js:13:38
  at Object.<anonymous> (custom-options.js:93:3)

知道为什么会这样吗？我认为开玩笑是错误的,但我已经尝试用Ava将其解决,结果是一样的.我开始认为这是个问题.

我正在用babel-jest预处理器开玩笑.

概述

我正在尝试使用 Babel 和 Webpack 构建 React 应用程序。我知道我可以使用create-react-app，但我想了解这些技术如何为我自己协同工作。

当我运行yarn run start或yarn run build（参见下面的package.json）时，Webpack 报告已构建好捆绑包。当我在浏览器中运行该应用程序时，出现错误Uncaught ReferenceError: React is not defined。

关于同样的错误，有很多问题，但没有一个解决方案可以解决我的问题。

问题

为了让 React、Babel 和 Webpack 很好地协同工作，我还缺少哪一部分？

代码

包.json

{\n  "private": true,\n  "scripts": {\n    "build": "webpack",\n    "start": "webpack-dev-server"\n  },\n  "dependencies": {\n    "react": "^15.4.1",\n    "react-dom": "^15.4.1",\n    "react-redux": "^5.0.1",\n    "redux": "^3.6.0"\n  },\n  "devDependencies": {\n    "babel-core": "^6.21.0",\n    "babel-loader": "^6.2.10",\n    "babel-preset-es2015": "^6.18.0",\n    "babel-preset-react": "^6.16.0",\n    "redux-devtools": "^3.3.1",\n    "webpack": …

我正在尝试创建一个 react + babel + webpack 项目。它可以工作，但 bundle.js 文件有 950KB 大。

bundle.js 总是那么大吗？如果没有，我该如何缩小尺寸？

这是我的 webpack.config.js：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
entry: APP_DIR + '/index.jsx',
output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
},
plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
],
module : {
    loaders : [
      {
        test : /\.jsx?/,
        loader …