Tag: webpack

在Angular-Cli WebPack脚本中，我想对绑定的脚本重新sorting: 我在Angular2项目上工作。我使用Angular-CLI脚手架angular度的应用程序。 Angular-CLI默认使用WebPack来处理很多事情，其中一个就是捆绑脚本。我使用npm：codrops-animated-header安装了这个包，需要我包含一个脚本到另一个之上，所以在angular-cli.json中，我根据需要对它们进行了sorting（检查最后2行：我要加载classie.js之前cbpAnimatedHeader.min.js）： "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js", "../node_modules/codrops-animated-header/js/classie.js", "../node_modules/codrops-animated-header/js/cbpAnimatedHeader.min.js" ], 但在控制台我发现这个错误： Uncaught TypeError: Cannot read property 'classList' of null at Object.addClass (eval at module.exports (http://localhost:4200/scripts.bundle.js:1:1), <anonymous>:33:9) at d (eval at module.exports (http://localhost:4200/scripts.bundle.js:1:1), <anonymous>:11:262) at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:100298:35) at Zone.runTask (http://localhost:4200/vendor.bundle.js:100174:47) at ZoneTask.invoke (http://localhost:4200/vendor.bundle.js:100368:33) at data.args.(anonymous function) (http://localhost:4200/vendor.bundle.js:101247:25) 当我检查捆绑脚本我发现cbpAnimatedHeader.min.js之前classie.js如下所示： /***/ 782: /***/ function(module, exports) { […]

Webpack在浏览器控制台上抑制eslint警告: 我已经完成了configuration我的eslint规则，并根据我的规则重构项目文件。事情是我有一些警告，我可能想离开那里一段时间。但我的问题是，浏览器控制台上显示警告，是什么使发展不可能。下面，我的webpackconfiguration： const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const context = path.resolve('.'); module.exports = { context: context, entry: './src/client.js', output: { path: path.join(context, 'build/client'), publicPath: '/static/', filename: '[name]-[hash].js' }, module: { preLoaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader' }, ], loaders: [{ test: /(?:node_modules).+\.css$/, loader: […]

生产服务器上的node.js: 我在angular2中编写了一个网站，并在AWS服务器上部署dist文件夹（使用webpack进行编译之后）。网站工作得很好。现在我想知道为什么？因为我没有在服务器上安装node.js ，我也没有部署node_modules文件夹，而不是如何使网站工作得很好。在我的VS代码中，我必须使用npm下载软件包，但在服务器上不存在软件包。好心解释。这听起来可能是一个奇怪的问题，但我真的很困惑或缺less一些基本知识。

babel，带有nodemon脚本的webpack？: 我想知道是否有一种方法来configurationwebpack babel和nodemon。我几乎在网上search，但没有发现任何有用的东西，或者可能是我，因为我是非常新的构build工具。我在我的package.json有这个脚本： "start": "nodemon app.js –exec babel-node" 它会传输我的代码，并在发生更改时重新启动服务器。我想知道是否有这样的手表function的webpack的configuration。我可以做到这一点与webpack（运行服务器，并观察变化，并重新启动巴贝尔transpile）？

使用Webpack启动Framework7 – Vue应用程序时出错'Dom7未定义': 我只是按照官方网站的说明：克隆回购，安装节点依赖关系并运行。但是，一旦我运行npm run dev命令，当我在浏览器中打开应用程序时，出现以下错误： > Uncaught ReferenceError: Dom7 is not defined > at framework7.js:14213 > at framework7.js:14317 > at Object.<anonymous> (framework7.js:18375) > at Object.<anonymous> (vendor.9d7fa26….js:18538) > at n (bootstrap 4a945b6…:54) > at Object.<anonymous> (app.8e4833b….js:107) > at n (bootstrap 4a945b6…:54) > at window.webpackJsonp (bootstrap 4a945b6…:25) > at app.8e4833b….js:1 有人能帮忙吗？最奇怪的是前几天所有的东西都起作用了。

在Angular（> = 2）应用程序中，如何将版本信息从npm package.json文件包含到已编译的输出文件中？: 信息：我已经使用@angular/cli创build了一个Angular（版本> = 2）应用程序。此应用程序正在进行版本更改。我使用命令npm version major或npm version minor或npm version patch ，将我的应用程序的语义版本信息更新到我的package.json文件中。当我运行ng build或ng build –prod时，我无法在“dist”输出文件夹的任何文件中find这个版本信息。题：有没有办法把我的应用程序的版本信息自动从package.json文件到一个输出文件（也许在一个html文件或js文件）？来自我的package.json文件的示例： { "name": "angular-ui", "version": "17.6.27", "description": "My awesome UI application", "license": "MIT", … } 理想情况下，我想创build一个“关于”组件，我想在我访问类似于以下URL的URL时发布我的应用程序的版本信息： HTTP：//本地主机：4200 /约页面上的预期输出： Application version: v17.6.27

使用帕格与NodeJS和Webpack: 我正在尝试使用Webpack与Pugbuild立一个基本的Express应用程序。这是我的文件树： build |-views |-index.pug |-app.js |-app.js.map server |-app.js package.json webpack.config.js app.js： const express = require('express'); const app = express(); const path = require('path'); app.set('port', process.env.PORT || 3000); app.set('view engine','pug'); app.set('views', path.join(__dirname + 'views')); app.get('/',(req,res) => { res.render('index'); }); var server = app.listen(app.get('port'), () => { console.log('Express server is listening on port ' + server.address().port); […]

如何在Angular CLI中configuration代理: 我创build了一个新的@ angular / cli项目，并在根组件中添加了一个http GET调用。没有使用代理这工作正常。 export class AppComponent implements OnInit { constructor(private http: Http) {} ngOnInit() { this.http .get('https://dog.ceo/api/breeds/list/all') .map(response => response.json()) .subscribe(data => console.log(data)); } } 当我尝试添加在Angular CLI wiki中描述的configuration时，事情就会出错。我的proxy.conf.json文件： { "/api": { "target": "https://dog.ceo", "secure": false } } 我将组件中的URL更改为/api/breeds/list/all 。而我运行ng serve –proxy-config proxy.conf.json 然后，我在浏览器控制台中发出内部服务器错误消息。而在我开始服务的terminal，我得到这个消息[HPM] Error occurred while trying to proxy […]

NPM / Webpack不能正确加载GSAP TimelineLite: 我正在重构和运行生产应用程序清理，并优化依赖关系。我们有一个React组件，它使用GSAP来处理一些与转换相关的东西，但只有TimelineLite库。这些都是简单的东西，没有任何困难或任何事情，所以我们不需要任何更复杂的GSAP项目，现在可以将它们擦除以优化。最初，我们只是通过NPM导入了整个GSAP库，如下所示： import 'gsap'; 根据GSAP npm文档（ https://www.npmjs.com/package/gsap ） … 默认（主）文件是TweenMax，其中还包括TweenLite，TimelineLite，TimelineMax，CSSPlugin，RoundPropsPlugin，BezierPlugin，AttrPlugin，DirectionalRotationPlugin和所有的轻松现在，我想减less我们的import脂肪，并切换到： import { TimelineLite } from 'gsap'; 但是，这是编译正确，但抛出以下客户端错误： Uncaught TypeError: _gsap.TimelineLite is not a constructor 有人知道为什么吗？仅通过importTimelineLite节省的体重并不是很大，但是值得一做。我是否需要专门导入GSAP库的其他部分？笔记：我也尝试import { TweenLite, TimelineLite } from 'gsap'; 没有运气。奇怪的是， import { TweenMax, TimelineLite } from 'gsap'; 也不工作，但从import { TweenMax } from 'gsap'; 确实。这里是我们正在使用的animation，超级基本： […]

如何在项目中分离出@types？: 我有一个使用React和Webpack的TypeScript项目： npm install react react-dom @types/react @types/react-dom –save npm install webpack ts-loader –save-dev 我有一个典型的webpack.config.js来构build项目。一切运作良好。然后，我将.js webpack.config.js转换为.ts 文件。 npm install ts-node @types/node @types/webpack –save-dev 事实上， webpack.config.ts很好。然而，node / webpack和react之间的typedef被看作是在同一个空间（即local和web）。例如在我的webpack.config.ts我应该引用@types/node而不是@types/react ，并且在我的src/components/app.tsx文件中，我应该引用@types/react而不是@types/node ，但是在这两个地方，编译器和IDE都认为我都使用（在运行时它会炸掉）。我怎样才能分开这些types的定义，以便正确的文件可见？从概念上讲，我想我只是想从devDependencies只能看到开发脚本，如webpack.config.ts ，和src文件只能看到从dependencies @types 。这种设置可能吗？