Tag: webpack

如何在服务器上呈现我的反应组件而不用大量修改现有的应用程序？: 我的server.js文件是写在节点上，如下所示： var path = require('path'); var express = require('express'); var app = express(); var PORT = process.env.PORT || 8080 // using webpack-dev-server and middleware in development environment if(process.env.NODE_ENV !== 'production') { var webpackDevMiddleware = require('webpack-dev-middleware'); var webpackHotMiddleware = require('webpack-hot-middleware'); var webpack = require('webpack'); var config = require('./webpack.config'); var compiler = webpack(config); app.use(webpackDevMiddleware(compiler, { noInfo: true, […]

试图在angular2中使用stomp.js: 我正在试图使用stomp.js实现一个Stomp Websocket客户端。我正在使用typescript和webpack的angular2，并且对于所有这些技术都是新的。我的angular2项目是build立在这个种子： https ： //github.com/angular/angular2-seed 作为实现stomp.js客户端的指南，我使用了https://github.com/sjmf/ng2-stompjs-demo 我目前收到的错误如下： ?d41d:73 EXCEPTION: TypeError: Cannot read property 'client' of undefined in [null] 错误发生在这个方法中： public configure() : void { // Check for errors if (this.state.getValue() != STOMPState.CLOSED) { throw Error("Already running!"); } let scheme : string = 'ws'; if( AppSettings.IS_SSL ) { scheme = 'wss'; } this.client = […]

用电子应用程序有效打包依赖关系来进行分发: 我试图找出一种有效的方法来捆绑和分发我的电子应用程序的各种依赖（节点模块和/或“客户端”脚本和框架像Angular）。尽pipenpm install module-name –save的基本方法对于开发很有效，但在最小化应用程序的大小和在运行时使用缩小的资源方面并不是那么好。例如，几乎所有的npm软件包（包括节点模块）都会附带许多“额外的行李”，例如自述文件，各种版本的组件（缩小的，未缩小的，ES2015，no-ES2015等）。虽然这些对于开发很有用，但是所有这些文件绝对不需要包含在您将要发布的版本中。目前似乎有两种方式来解决这个问题： Electron Builderbuild议使用2-file package.json系统。在开发过程中使用的任何依赖项都应该使用–save-dev安装npm，然后在构build应用程序时使用prunning。在这方面我有几个问题：我不太清楚为什么需要2个文件的package.json系统，如果用–save-dev安装dev-only模块/依赖–save-dev ，然后在实际的应用程序构build/编译过程中使用修剪？不pipe上面哪种方法被使用，你仍然会在你的应用程序中得到完整的npm包，包含你的应用程序没有使用的所有杂项/重复文件。那么，如何“修剪”这么说自己的npm包，以便只有在运行时正在使用的实际文件（如缩小的脚本）被包括在内？将Bower用于“客户端”包（如AngularJS 2，Bootstrap，jQuery等）和使用npm作为节点模块（如fs-extra）将是一个更好的select，只要关注的分离和绑定的容易性？是否可以使用WebPack来生成所需的文件，至less是“cient-side”，这样只有真正的节点模块才会被包含在应用程序中，而其余的将以web-pack编译的forms文件？关于这种捆绑的依赖和分布如何在实践中得到认可的任何实用技巧？咕嘟咕嘟的脚本？网页包装脚本？项目结构？谢谢。

如何连线Angular2 + Webpack + Node + Express？: 首先，我是有线的，有工作的，但对结果有些不满，有一种感觉可以改善。（目前的结果可以在这里find – https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1 。）目录结构是： C:. │ .gitignore │ package.json │ tsconfig.json │ tslint.json │ typings.json │ webpack.config.js │ ├───dist │ └───server │ api.js │ api.js.map │ main.js │ main.js.map │ └───src ├───client │ app.component.ts │ index.html │ main.ts │ polyfills.ts │ tsconfig.json │ vendor.ts │ └───server api.ts main.ts tsconfig.json 现在dist文件夹只有从./src/server编译的服务器端文件。它们被IntelliJ IDEA放置在那里，因为./src/server/tsconfig.json在保存时请求编译。客户端绑定发生在webpack-dev-server的内存中。 […]

如何在React应用程序中使用webpackasynchronous需要模块？: 在React应用程序中，我想导入一个名为flowtime.js的库，仅用于特定的path/path，然后执行更多的代码。这个库有一个名为Brav1toolbox的依赖项。在npm上都不可用。我的策略是在Component的componentDidMount方法中使用webpack的require 。这是我的尝试： componentDidMount() { require.ensure([ 'local/relative/path/to/lib/brav1toolbox.js'], function(require) { var f = require('local/relative/path/to/other/lib/Flowtime.js/js/flowtime.js'); }); } 这会导致以下错误。 Uncaught（承诺）ReferenceError：Brav1Toolbox未定义所以Flowtime正在加载，但无法findBrav1Toolbox。我没有React或webpack的经验，所以也许我有一个误解。我正在尝试使用webpack来只加载这些库，如果我的用户访问需要这些库的path。这是我用作参考的webpack指南。感谢您的帮助。

'NodeRequire'types的'确保'属性不存在: 我正在尝试webpack 2代码分裂。根据这个文档： https ： //webpack.js.org/guides/code-splitting-require/ 下面的代码应该将some.css包含到一个名为“something”的新块中 require.ensure([], function(require) { require('some.css'); }, 'something'); 但是当我运行它，我得到这个错误： ERROR in ./src/index.ts (4,9): error TS2339: Property 'ensure' does not exist on type 'NodeRequire'. 任何想法如何解决它？谢谢

如何解决dynamic需要在第三方库？: 我的桌面应用程序使用Electron + React作为接口， Edge.js将Node与我的C＃应用程序连接起来。我的问题是：Webpack无法绑定我的应用程序，因为Edge.js依赖项会引发以下错误：严重依赖性：依赖性的请求是一个expression式问题是Edge.js有以下dynamic需求： var compilerName = 'edge-' + language.toLowerCase(); var compiler = require(compilerName); 大多数情况下， compilerName将被转换为“edge-cs”，但Webpack无法确定这一点。我该如何解决这个问题？人们build议设置需要的上下文或ContextReplacementPlugin ，但它们通常适用于你require('./directory/' + variable)情况下，我不知道如何在我的情况下使用它们require(variable) 。注：我需要一个解决scheme，我不需要修改我的第三方库代码。

如何使用node-webkit中的webpack将节点模块与本机插件捆绑在一起？: 我正在尝试构buildpty.js以用于node-webkit （即nw.js）v0.8.6： mkdir testapp && cd testapp nvm use 0.10.36 npm install -g nw-gyp npm install pty.js cd node_modules/pty.js # Build the native addon for node-webkit v0.8.6: nw-gyp configure –target=0.8.6 && nw-gyp build 输出以gyp info ok结束。使用简单的app.js和index.html ，该应用程序将在JavaScript控制台中无误地启动： <!– index.html –> <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <script src="app.js"></script> </body> […]

如何在webpack中使用ES6 loader和brfs变换？: 我有一个大的webpack生成用ES6编写的ui，我想添加一个名为lumenize的fs.readFileSync（）的npm模块。该软件包通常使用browserify构build。我无法configurationwebpack从ES6代码中使用bfrs。我试过这个configuration： loaders: [ "transform?brfs", "babel-loader" ], 并颠倒了顺序，但都没有奏效。我想过要导入浏览器版本的软件包，但是这个浏览过的版本公开了require（）的全局polyfill，直接在浏览器中使用。我知道这是一个不可用的webpack。真的吗？我可以分解这个项目并删除这个全球性的风险，但是对这个configuration的帮助将不胜感激。

Webpack不解决全球安装的babel或babel-loader: 我一直在尝试一个新的项目，并希望使用webpack和模块来分割代码。我已经安装了npm，然后安装webpack，如下所示npm install -g webpack npm install -g babel-cli babel-core babel-loader babel-presets-es2015 现在在我的项目中，我创build了一个包含以下内容的新的config.js文件。 module.exports = { entry: './src/js/app.js', output: { filename: 'dist/js/bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader' } ] }, } 然而，我总是得到一个错误，说ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' 换句话说，如何让webpackparsing全局安装的软件包？