Tag: webpack

未捕获错误：定义不能间接使用: 我正在使用webpack和babel来传输es6 / jsx文件中的一个节点，我正在制作一个React应用程序。一切都很好，直到我包括google spreadsheet npm模块，并尝试将其导入到我的项目。我得到错误Uncaught Error: define cannot be used indirect但在导入的模块内没有定义语句。这个错误只出现在浏览器中，而不是在我的控制台，当webpack绑定我的文件，并完全停止任何东西在页面上呈现。我认为这与AMD / Commonjs有关，但是我太缺乏经验，无法确切知道，或者如果是这样的话，甚至可以做什么。任何帮助，将不胜感激

如何发布Vue.js组件库？: 我正在研究一个包含Vuex模块和用户可以扩展的抽象组件的项目。我很乐意在NPM上发布这个代码来清理我的代码库，并将其从我的项目中抽离出来，作为一个经过严格testing的模块。我已经指定了package.json的主文件来加载一个索引，它导入我想要公开的所有东西： https://github.com/stephan-v/vue-search-filters/ 该指数目前包含这一点： import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue'; import Search from './src/store/modules/search'; module.exports = { AbstractFilter, Search }; 为了这个工作，我需要transpile，因为一个babel编译器通常不会transpile从node_modules导入文件（如果我在这里错了，纠正我）。此外，我可能是一个好主意，这样做可以被不同的系统使用。如何仅使用Webpack只传输我需要的文件？我必须为此创build一个单独的configuration吗？这样的configuration是什么样的？我知道vue-cli有一个单一文件组件的build命令，但是这有些不同。任何提示或build议如何transpile这样的东西是值得欢迎的。编辑这似乎也是一个好的开始： https://github.com/Akryum/vue-share-components Webpack用户要注意的最重要的事情是，您需要在UMD中传输您的文件，可以通过以下方式进行设置： libraryTarget: 'umd' 这将确保您正在进行Universal Module Definition ，这意味着您的代码可以在不同的环境中工作，如AMD，CommonJS，作为简单的脚本标记等。除此之外，在webpack中提供外部属性是重要的： externals: {} 在这里，您可以定义哪些库是您的项目用户，但不应将其构build到您的dist文件中。例如，您不希望将Vue库编译/转译到您的NPM软件包的源代码中。我会研究一下，到目前为止，最好的select看起来像自己创build一个自定义项目如果我想灵活性和unit testing。 Webpack文档这也是深入了解如何使用Webpack发布内容的一个有用的页面： https://webpack.js.org/guides/author-libraries/#add-librarytarget

Webpack Express无法parsing模块“fs”，请求依赖性是expression式: 当我在我的项目中包含Express时，当我尝试使用webpack进行构build时，总会遇到这些错误。 webpack.config.dev.js var path = require("path") module.exports = { entry: { "server": "./server/server.ts" }, output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/public/" }, module: { loaders: [ { test: /\.ts(x?)$/, exclude: /node_modules/, loader: "ts-loader" }, { test: /\.js(x?)$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.json$/, loader: "json-loader" }, { test: /\.scss$/, exclude: /node_modules/, […]

如何协调全球webpack安装和本地装载机: 我的package.json包括webpack和一些加载器： "devDependencies": { "babel-core": "^5.2.17", "babel-loader": "^5.0.0", "jsx-loader": "^0.13.2", "node-libs-browser": "^0.5.0", "webpack": "^1.9.4" } 当我运行webpack它不在我的path，所以它不显示为find。我安装了全局的npm install -g webpack所以二进制文件会出现在我的path中，但是不能find安装在./node_modules中需要处理我的依赖关系树的加载模块： $ webpack –progress –colors –watch 10% 0/1 build modules/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:206 throw e; ^ Error: Cannot find module 'jstransform/simple'“` 这里的首选解决scheme是什么？我可以在全球范围内安装我的装载机，但由于交叉项目问题，我不喜欢这样我可以尝试从node_modules运行webpack（不知道怎么老实，把它添加到$PATH为每个项目？）或者我可以尝试给我的全球webpack访问我的node_modules文件夹，这也似乎hacky。我做错了什么，还是有更好的社区认可的方式来解决这个常见的问题？

如何指示webpack观察NPM链接依赖项（包）中的更改: 我想弄清楚如何让webpack观看一个NPM的链接依赖。我试图添加一个明确的入口指向包，我试图明确包含它，也不排除/ node_modules /（这是很常见）。我想要实现的场景如下所示：我想将部分基于响应的应用程序分离为组件库（NPM包）。主包和依赖关系都是用ES6编写的，所以我创build了一个小型的gulp脚本来监视从属项目的变化，并将源代码（src /）转换为lib。我已经使用npm链接来连接相关的软件包，所以我不需要在每次更改时都打包/发布/重新安装它。当我对依赖包进行更改时，吞噬任务将传输代码OK。我正在挣扎的最后一部分; 当依赖被前面提到的吞咽任务刷新的时候，让webpack观察触发重新绑定。

IntelliJ使用自定义模块path时，“无法find声明去”: 我试图使用JavaScript ES6导入语法与WebPackconfiguration为使用client和node_modules作为解决导入的根path。 IntelliJ Idea从“node_modules”目录发现模块，但无法parsing“client”目录中的path。例如：当即时通讯使用： import ImmutableStore from 'alt/utils/ImmutableUtil'; – IntelliJfind正确的path，因为alt模块在node_modules目录上 import CustomiserActions from 'js/actions/Customiser.actions.js'; – 它不起作用，因为js模块在client目录中。我已经尝试了许多选项在模块设置/项目设置/标记目录作为源的根/添加外部库，但似乎没有任何工作。 IntelliJ Idea版本：14.1.5

npm链接与webpack – 找不到模块: 我试图npm链接一个模块到一个项目使用webpack作为其捆绑。当然，尝试了很多东西之后，我总是得到这个错误： ERROR in ./src/components/store/TableView.jsx Module not found: Error: Cannot resolve module 'react-bootstrap-table' 这是我在做这个时所采取的确切步骤： 1.) cd ../forks/react-bootstrap-table 2.) npm link (success, checked ~/.nvm/…/node_modules/react-bootstrap-table for symlink and it's there) 3.) cd ../../projRoot/ 4.) npm link react-bootstrap-table (no errors thrown?, says successful link) 5.) node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js 我试过的解决scheme： – https://webpack.github.io/docs/troubleshooting.html – 如何使一个链接的组件peerDepdencies使用被链接的脚本的等效node_modules？ – 谷歌serps上的许多紫色链接 webpack.config.js const webpack = […]

WebPack源地图混淆（重复的文件）: 我决定尝试一下我今天轮到的一个新项目WebPack，我从源代码中得到了非常奇怪的行为。在文档中找不到任何关于它的内容，在浏览StackOverflow时也不能find其他人。我目前正在查看由Vue-CLI的WebPack模板生成的HelloWorld应用程序 – 没有对代码，构build环境或其他任何内容进行更改。我安装了一切，像这样运行： vue init webpack test && cd test && npm install && npm run dev 看看我的源代码，我看到以下内容：这是一个混乱。为什么有三个版本的HelloWorld.vue和App.vue ？更糟糕的是，每个版本都有一个稍微不同的代码版本，没有一个匹配原始源代码。坐在根目录下的HellowWorld.vue与原始的源代码相匹配，但它在那里做什么，而不是在./src/components文件夹中？最后，为什么没有第四个App.vue有它的原始来源？据我所知，这可能与WebPack装载机有关。不过，我从来没有得到任何其他打包机的这类问题。以下是使用Browserify Vue-CLI模板完全相同步骤的示例：没有webpack:// schema，每个文件只有一个副本，这些文件实际上包含了原始的源代码（对于源地图很重要），没有意外的(webpack)/buildin或者(webpack)-hot-middleware ，没有. 子目录，….只是源代码。

获取Webpack不要捆绑文件: 所以现在我正在使用一个原型，我们正在使用webpack（用于构build.tsx文件和复制.html文件）和webpack-dev-server（用于开发服务）之间的组合。正如你可以假设我们也使用React和ReactDOM作为一些库依赖关系。我们目前的构build输出结构如下： dist -favicon.ico -index.html -main.js -main.js.map // for source-mapping between tsx / js files 这将所有模块（包括库依赖关系放在大捆绑文件上）。我想最终的结果是这样的： dist -favicon.ico -index.html -appName.js -appName.min.js -react.js -react.min.js -reactDOM.js -reactDOM.min.js 我引用了index.html中的每个库和.tsx文件中的import语句。所以我的问题是这个…我如何从webpack生产这个巨大的捆绑.js文件到单个.js文件（包括库，而不必单独指定每个）？ **奖金：我知道如何做prod / dev环境标志，那么我怎样才能简化这些单独的文件（再次捆绑它们）呢？当前webpack.config： var webpack = require("webpack"); // Assigning node package of webpack dependency to var for later utilization var path = require("path"); // // […]

Webpack HMR从不更新页面: 我一直在使用Webpack的不同特性，而且我慢慢地理解了一些东西。典型的控制台输出： [WDS] App updated. Recompiling… [WDS] App hot update… [HMR] Checking for updates on the server… [HMR] The following modules couldn't be hot updated: (They would need a full reload!) [HMR] – 14 [HMR] Nothing hot updated. [HMR] App is up to date. 无论代码更新如何，JS，手写笔，模板等，都会发生这种情况。一切都是通过转换（巴别塔，手写笔，把手）来实现的，但这并不重要。我有一个GitHub项目，如果有人想查看完整的源代码： https ： //github.com/SimenB/webpack-fun 。 npm install && npm start运行它。 […]