Tag: webpack

父React应用程序li​​nting编译通过`npm link`连接的依赖代码

我有一个React应用程序，它依赖于我创build的库中的另一个React组件。 当我在Parent上运行构build脚本，并通过npm install依赖项时，父应用程序中不会创build依赖项。 但是，当我运行npm link所以我可以在本地开发组件，并让我的父应用程序运行它的构build脚本，由于它正在linting传输代码的依赖项，它失败。 任何想法为什么发生这种情况？ UPDATE 这似乎与最终捆绑结束的目录名称有关。 我把它命名为bin 。 通过npm文档阅读看来， npm link为模块的目录以及bin目录（如果有的话）创build了一个符号链接。 我只是把名字改成了dist ，并解决了这个问题。 不是最好的答案，但希望它可以帮助处于同样情况的人。

一个运行Vue前端和微服务的npm包

我的计划是将微服务和Web应用程序部署到zeit now服务器，以便Web应用程序可以对微服务服务器端进行/ api调用。 问题是，我不知道如何将两个命令合并到我的package.json文件的npm脚本对象中。 目前我只有两个目录，都有自己的package.json文件，微服务只是一个index.js，使用一个简单的微服务，使用micro和package.json文件来运行它。 然后，我的Vueconfiguration代理请求/ api到本地运行的微服务端口。 我的configuration如下。 我正在使用webpack高级vuejs模板。 这是否可以在一个包中进行部署和构build？ 我正在使用微服务来进行authentication的API调用，就像你分割它的任何方式一样，如果它们被存储在前端项目中，键将被显示，这就是为什么我select使用只服务器端的微服务。 在我的config/index.js dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite:{ "^/api": "" } } }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to […]

Uncaught TypeError：$ r.Version不是一个构造函数

我正面临着来自Webpack为Angular4项目生成的构build的这个意外问题。 以下是我的package.json文件的一部分。 项目后端是在nodejs中开发的，但我不认为这可能会导致问题，目前我正在将其部署到Heroku环境中。 Heroku链接 构build在本地机器上完美运行，但无法在现场环境中启动。 "dependencies": { "@angular/animations": "4.3.2", "@angular/common": "4.3.2", "@angular/compiler": "4.3.2", "@angular/core": "4.3.2", "@angular/forms": "4.3.2", "@angular/http": "4.3.2", "@angular/platform-browser": "4.3.2", "@angular/platform-browser-dynamic": "4.3.2", "@angular/router": "4.3.2", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29", "@types/lodash": "^4.14.74", "async": "^2.5.0", "bluebird": "^3.5.0", "body-parser": "^1.15.2", "connect-multiparty": "^2.0.0", "core-js": "^2.4.1", "crypto-js": "^3.1.9-1", "ejs": "^2.5.7", "email-templates": "^2.7.1", "express": "^4.15.3", "jsonwebtoken": "^7.4.1", "lodash": "^4.17.4", "moment": "^2.18.1", "mongoose": "^4.11.9", […]

在AoT构build之后无法删除文件

当我从我的package.json文件运行build：prod命令时，编译生成成功，但无法删除.ngsummary.json文件以及所有.ngfactory.ts文件 package.json文件： { "name": "name", "version": "1.0.0", "private": true, "scripts": { "start": "node ./bin/www", "build": "del-cli public/js/app && webpack –config webpack.config.dev.js –progress –profile –watch", "build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack –config webpack.config.prod.js –progress –profile –bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'" }, "dependencies": { […]

在Visual Studio的预生成中使用webpack

我有两个命令： npm run build – 调用webpack来编译我所有的.js npm run dev – 调用webpack -w ，编译我所有的.js，并保持在监视模式，寻找变化。 我想将它与Visual Studio的版本集成，所以我进入了属性 – >生成事件 – >预生成 if $(ConfigurationName) == Debug ( npm –prefix ../ run dev ) ELSE ( npm –prefix ../ run build ) 这个逻辑起作用。 如果我处于发布模式，它将简单地捆绑我的文件，服务器将运行。 但问题是在debugging模式下，因为webpack -w不会结束，构build也永远不会结束，它期望一个退出代码…. 所以我试图智取Visual Studio，并开始一个新的CMD过程，不会阻止构build的开始： start cmd /K npm –prefix ../ run dev 不幸的是，Visual Studio对我来说太聪明了。 所以问题是：有没有什么聪明的方法让视觉工作室在预编译命令中简单地运行我想要的，而不是等待它完成？ […]

使用手写笔与Webpack（手表）

我开始使用一个JS应用程序，使用Babel + Webpack + Npm，我的样式是用手写笔完成的，因为我使用的是我build立的Webpack运行命令，所以我想用它来运行我通常使用的命令手写笔： stylus -u nib -w ./app/stylus/ –out ./app/stylesheets 这是我的package.json { "name": "catch-and-run", "version": "1.0.0", "description": "Catch and Run game! DOOM 1993 Inspired", "main": "./app/javascripts/main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack –progress -p", "watch": "webpack –progress –watch" }, "repository": { "type": "git", "url": "git+https://github.com/Nikodermus/catch-and-run-game.git" }, […]

无限的Webpack手表循环 – 如何忽略.js文件的变化等

我使用ts-loader的webpack -w命令处于无限循环状态。 我猜测这是因为webpack -w正在看到.js文件的变化，所以导致循环 ： webpack -w => ts transpile => .js changes => webpack -w 有没有人见过这个？ 告诉webpack-w忽略.js文件是最好的办法吗？ 我怎样才能做到这一点？ 这是我的webpack.config.js文件： module.exports = { entry: ['babel-polyfill', './lib/index.ts'], output: { path: path.resolve(__dirname + '/dist'), filename: 'suman.js' }, module: { rules: [ // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` { test: […]

有条件地加载需求的模块（基于节点env）

我正在使用webpack创build捆绑。 我想根据节点variables加载b.js或c.js。 export default (process.env.FOO) ? require('./b').default : require('./c').default; 当process.env.FOO被定义时（指定了FALSE或TRUE），它工作正常。 但是，当process.env.FOO没有定义，似乎webpack捆绑这两个文件。

在heroku上使用webpack部署应用程序

我有一些麻烦，试图将项目部署到Heroku，它在本地工作，但在Heroku，有一个消息“应用程序错误”。 我感谢任何指导或支持知道我做得不好。 据我所知，构build似乎没有任何问题，但试图访问networking，这是致命的。 Github： https ： //github.com/gpincheiraa/angularjs-tdd-jest/tree/heroku_deploy url： https ： //still-plains-66291.herokuapp.com/ 这是错误日志 2017-10-28T00:04:11.032366+00:00 heroku[web.1]: Starting process with command `node start` 2017-10-28T00:04:12.859627+00:00 app[web.1]: module.js:515 2017-10-28T00:04:12.859643+00:00 app[web.1]: throw err; 2017-10-28T00:04:12.859644+00:00 app[web.1]: ^ 2017-10-28T00:04:12.859644+00:00 app[web.1]: 2017-10-28T00:04:12.859645+00:00 app[web.1]: Error: Cannot find module '/app/start' 2017-10-28T00:04:12.859646+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:513:15) 2017-10-28T00:04:12.859646+00:00 app[web.1]: at Function.Module._load (module.js:463:25) 2017-10-28T00:04:12.859647+00:00 app[web.1]: at Function.Module.runMain (module.js:653:10) 2017-10-28T00:04:12.859647+00:00 […]

如何通过npm包中的filepath引用资产？ （应用程序：webworker）

我已经编写并发布了一个vanilla JS节点包，下面是package.json： { "name": "…", "description": "…", "version": "1.0.0", "types": "./index.d.ts", "main": "./dist/bundle.js", … } 我也使用webpack，以下webpack.config.js const path = require('path'); const WebpackShellPlugin = require('webpack-shell-plugin'); module.exports = { entry: './src/js/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', library: '', libraryTarget: 'commonjs-module' }, plugins: [ new WebpackShellPlugin({onBuildStart:['rm -r dist', 'mkdir dist']}) ] }; 最后，我使用下面的方式在我的库中使用worker-loader： var MyWorker = […]