Tag: webpack

使用Express的React.js：在使用Express作为服务器时在客户端渲染一个简单的组件？: 我是新来的ReactJS和Node.js，我肯定卡住了。我的问题是，我不能在我的index.html文件中呈现我简单的React组件。当我在terminal写webpack的时候，会输出一个bundle.js文件。然后，当我启动使用npm start脚本的webpack-dev-server npm start ，它运行，我可以去localhost:3000 ，它输出：输出的图像。这意味着它不会输出<div id="app"></div> 。当我到localhost:3000/bundle/bundle.js它会在浏览器中输出bundle.js文件。我也尝试在terminal中使用node app.js启动服务器，并启动服务器并在转到localhost:3000时呈现index.html文件，但不会加载bundle.js脚本，而是404。我尝试以多种方式编写src-attribute（../bundle/bundle.js等），但是我无法正常工作。下面的文件夹结构我希望它是可读的 root bundle bundle.js src App.jsx static index.html app.js package.json webpack.config.js 无论如何，我search了几个小时，我找不到任何解决scheme，所以我希望有人能帮助我。我会在下面发布相关文件。干杯! app.js var express = require('express'); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var user = require('./models/userModel'); var app = express(); app.use(express.static('static')); var […]

@types，打字稿和webpack是如何相关的: 要在.ts文件中使用导出的types，必须添加导入 import {jQuery} from 'jQuery' 现在，当我使用这个我没有得到intellisense，我仍然需要做npm install @types\jQuery来获得这个。所以没有@types，上面的语句只是推断在打字稿捆绑包括这个文件。现在，如果我安装@types，而不添加任何其他代码，我开始获得智能感知。那么这就像上面的说法是双重目的。在捆绑使用typescript / webpack，它告诉捆绑这些文件作为依赖和编译期间，它告诉包括.d.ts而不是实际的代码文件？为什么这个问题：我试图将angular.whatever移动到打字稿，我可以在.ts文件中使用angular.whatever甚至不导入它？不明白为什么会发生这种情况。它应该给我错误要求我导入angular

git push heroku master用node.js部署挂起: 我的应用程序在本地运行，但试图部署到heroku时，它只是挂起。当我去到网站，它显示一个公共文件，但没有别的。它有这个错误消息。我一直在试图弄清楚这几天无济于事。如果有人有任何见解，我会很感激！ https://analogy-alley.herokuapp.com/bundle.js Failed to load resource: the server responded with a status of 404 (Not Found) 我的terminal在部署挂起时显示： Counting objects: 80, done. Delta compression using up to 4 threads. Compressing objects: 100% (75/75), done. Writing objects: 100% (80/80), 8.04 KiB | 0 bytes/s, done. Total 80 (delta 48), reused 0 (delta 0) […]

问题在vuejs 2组件中导入css / js文件: 我有以下.vue组件文件： <template> …. </template> <script> export default { /* stuff here*/} </script> <style> </style> 现在我想只为这个组件包含一些css / js（由themeforest上的模板提供）文件。包括他们在标签内似乎没有工作。任何想法有什么不对？

SyntaxError：意外的标记{在jesttesting期间加载节点模块时: 我正在运行一个依赖于“ant”节点模块的笑话testing 这似乎是不能正确parsing的atnd模块内的CSS文件。我该如何解决这个问题？当我运行它失败，如下所示： C:\path\to\project\node_modules\antd\lib\style\index.css:10 html { ^ SyntaxError: Unexpected token { at transformAndBuildScript (node_modules\jest-cli\node_modules\jest-runtime\build\transform.js:316:10) at Object.<anonymous> (node_modules\antd\lib\switch\style\css.js:3:1) 我的babelrc如下： { "presets": [ "react", "es2015-loose", "stage-0" ], "plugins": [ "babel-root-slash-import", "transform-decorators-legacy", "react-hot-loader/babel", "transform-runtime", ["import", [{"libraryName": "antd", "style" : true}]] ], "compact": true, "ignore": [ "/node_modules/(?!react-number-input)" ] } jest.json { "setupTestFrameworkScriptFile": "<rootDir>/jasmine-setup-env.js", "bail": false, "collectCoverage": true, "collectCoverageFrom": […]

在webpack的js文件中导入moment.js: 在我的项目中，我使用webpack和npm。我安装了moment.js： npm install moment 。然后我想在我的app.js文件中导入它： import moment from "moment" 。但它不起作用。我得到：无法解决的时刻… 我试着let moment = require('moment'); 但我得到同样的错误。但我可以在我的webpack.config.js文件没有错误要求。我的app.js文件位于/myapp/frontend/app.js 我的webpack.config.js文件位于： /myapp/webpack.config.js 所以，请解释为什么我不能在我的app.js中需要时刻，我该怎么做？我的configuration文件： const webpack = require("webpack"); const NODE_ENV = process.env.NODE_ENV || "development" const path = require('path'); //example of successfull importing let moment = require('moment'); console.log(moment(new Date())); module.exports = { context: __dirname […]

npm-debug.log不会在错误时生成: 根据npm文档“失败时，所有日志都写入当前工作目录中的npm-debug.log”。但是，build立错误我没有得到一个日志文件写入。当前的设置 $> npmconfiguration列表 cwd = /home/me/mynodeapp HOME = /home/me $> npm config ls -l loglevel = "warn" webpack.config.js var config = { loglevel: 'silly', entry: { app: './myapp/start.js' }, output: { … }, }; module.exports = config; 的package.json { { "name" : "myapp", "main": "start.js", "scripts": { "build": "rm -rf ./output/ && NODE_ENV=production […]

Laravel 5.4使用composer php添加zurb基础6.3.0: 运行composer php后需要zurb / foundation我如何参考我的供应商目录中的基础文件@import foundation总是说没有find文件，它看起来不像laravel mix可以select包含elixir在之前的版本中包含的path。几乎所有我在网上看到的安装基础与npm是首选的方式？我没有任何反对使用npm，但是当我运行“npm运行生产”由于string文字“`”失败，因为uglifyJs不支持ES6。我正在尝试composer php的版本，因为我相信它已经编译了js，所以我不必做任何hacky来让它在生产环境中运行。

模块构build失败：SyntaxError：在JSON位置0的意外的标记': 我在这里有一个webpackconfiguration，我想添加一个答案moment-timezone 我应该如何使用webpack的瞬时时区？，导致我到Webpack – 错误：无法定义“查询”和多个加载器列表中的加载器 var webpack = require('webpack'); module.exports = { //devtool: 'inline-source-map', entry: [ 'webpack-hot-middleware/client', './client/main.js' ], output: { path: require("path").resolve('./assets'), filename: 'bundle.js', publicPath: '/' }, plugins: [ new webpack.HotModuleReplacementPlugin() ], externals: { jquery: 'var jQuery' }, module: { loaders: [ { test: /\.jsx?$/, loaders: ['json-loader', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=react-hmre'], exclude: /node_modules/ } ] } }; […]

为什么webpack吐出10000多行？: 在使用默认configuration运行npm install之后，我通过默认的laravel设置使用webpack。在webpack.mix.js中，我有以下几点： mix.js('resources/assets/js/init.js', 'public/js'); 而resources/assets/js/init.js包含以下内容： (function ($) { $(function () { $('.button-collapse').sideNav(); }); // end of document ready })(jQuery); 那么为什么webpack会为这个文件发出高达10000多行？！：这是输出的要点。我完全误解了webpack，或者是一个laravel或webpack的默认混乱？我基本上期望JS的副本，因为npm run dev不应该缩小，它没有任何ES6语法…那么这是什么？如果我将相应的行添加到混合中，同样的事情可以完美地将scss编译为css。