程序设计 webpack

18

当我在Django项目中设置React时，遇到了此错误模块构建中的ModuleBuildError失败（来自./node_modules/babel-loader/lib/index.js）：语法错误：C：\ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js：支持实验语法'classProperties '当前未启用（17：9）： 15 | 16 | class BodyPartWrapper extends Component { > 17 | state = { | ^ 18 | 19 | } 20 | Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel …

117 reactjs webpack babeljs babel

20

React-Native：模块AppRegistry不是注册的可调用模块

我目前正在尝试让ES6 react-native-webpack-server在Android模拟器上运行。不同之处在于我已经升级了我的产品package.json并build.grade使用react 0.18.0，并且在启动时遇到了此错误。据我所知AppRegistry是正确导入的。即使我将代码注释掉，该错误仍然会出现。这确实可以在iOS上正常运行。我究竟做错了什么？编辑：尝试了其他确实支持0.18.0的样板文件后，我仍然遇到相同的问题。

114 android react-native webpack

6

Webpack 4-如何配置最小化？

Webpack 4附带以下语句： webpack.optimize.UglifyJsPlugin已被删除，请改用config.optimization.minimize。足够公平，但是我找不到有关配置在后台运行的UglifyJsPlugin实例的任何信息，例如，更改缓存目录。能做到吗？

114 javascript webpack webpack-4

3

HtmlWebpackPlugin注入相对路径文件，该文件在加载非根网站路径时会中断

我正在使用webpack和HtmlWebpackPlugin将捆绑的js和css注入html模板文件中。 new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), 并生成以下html文件。 <!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> 当访问应用程序的根目录时，此方法工作正常localhost:3000/，但是当我尝试从另一个URL访问应用程序时，此方法将失败，例如，localhost:3000/items/1因为捆绑的文件未注入绝对路径。加载html文件时，它将在不存在的/items目录中查找js文件，因为react-router尚未加载。如何获得HtmlWebpackPlugin以绝对路径注入文件，所以express将在我的/dist目录的根目录而不是在目录的根目录查找它们/dist/items/main-...min.js？或者，也许我可以更改我的快速服务器以解决此问题？ app.use(express.static(__dirname + '/../dist')); app.get('*', function response(req, res) { res.sendFile(path.join(__dirname, '../dist/index.html')); }); 本质上，我只需要了解以下内容： <script src="main...js"></script> 在源代码的开头加上斜线。 <script src="/main...js></script>

114 javascript express webpack react-router

7

使用Webpack将jQuery公开到真实的Window对象

我想将jQuery对象公开给可在浏览器的开发人员控制台内部访问的全局窗口对象。现在在我的webpack配置中，我有以下几行： plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] 这些行将jQuery定义添加到我的webpack模块中的每个文件中。但是，当我构建项目并尝试像这样在开发人员控制台中访问jQuery时： window.$; window.jQuery; 它说这些属性是不确定的... 有没有办法解决这个问题？

111 javascript jquery webpack

5

如何从本地网络中的设备访问webpack-dev-server？

有一些webpack开发服务器配置（它是整个配置的一部分）： config.devServer = { contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'), stats: { modules: false, cached: false, colors: true, chunk: false }, proxy: [{ path: /^\/api\/(.*)/, target: options.proxyApiTarget, rewrite: rewriteUrl('/$1'), changeOrigin: true }] }; function rewriteUrl(replacePath) { return function (req, opt) { // gets called with request and proxy …

111 javascript node.js networking webpack web-development-server

16

打字稿反应-找不到模块“ react-materialize”的声明文件。'path / to / module-name.js'隐式具有任何类型

我正在尝试从react-materialize中导入组件- import {Navbar, NavItem} from 'react-materialize'; 但是当webpack正在编译我的文件时，.tsx它会为上述内容引发错误- ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an 'any' type. 这个的任何解决方案。我不确定如何解析此导入语句以与ts-loaderwebpack一起使用。该index.js反应-Materialise的长相很喜欢这一点。但是如何解决此问题的模块导入到我自己的文件中.. https://github.com/react-materialize/react-materialize/blob/master/src/index.js

110 reactjs webpack webpack-2

4

分配左侧的Javascript对象括号表示法（{Navigation} =）

我以前没有看过这种语法，并且想知道它的全部含义。 var { Navigation } = require('react-router'); 左侧的括号引发语法错误：意外的标记 { 我不确定webpack配置的哪个部分正在转换或语法的目的是什么。这是和谐的事情吗？有人可以启发我吗？

108 javascript webpack ecmascript-6

19

拒绝加载字体“ data：font / woff…”，它违反了以下“内容安全策略”指令：“ default-src'self'”。请注意，“ font-src”

我的反应webApp在浏览器控制台中给出此错误 Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. 也： Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note …

108 javascript reactjs webpack

6

如果名为jsx的文件，webpack找不到模块

当我这样写webpack.config.js时 module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; 在index.jsx我导入一个react模块App import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = document.getElementById('box') render( …

107 reactjs webpack webpack-dev-server

7

Webpack和Babel“您可能需要适当的加载器来处理此文件类型”

我正在尝试将Webpack与Babel一起使用来编译ES6资产，但是却收到以下错误消息： You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' 这是我的Webpack配置的样子： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './index', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/dist/' }, …

106 javascript webpack babeljs es6-module-loader

2

此“反应脚本弹出”命令有什么作用？

该npm run eject命令做什么？我确实了解其他命令的功能，例如启动，构建，测试。但是不知道弹出。

105 reactjs webpack create-react-app react-scripts

4

Webpack加载程序与插件；有什么不同？

webpack中的加载器和插件有什么区别？在对插件的文件只是说：使用插件添加通常与webpack中的捆绑包相关的功能。我知道babel使用加载程序进行jsx / es2015转换，但是看起来其他常见任务（例如，copy-webpack-plugin）使用插件代替。

103 javascript reactjs webpack

5

Webpack Babel 6 ES6装饰器

我有一个用Webpack作为捆绑器的用ES6编写的项目。大部分转译工作正常，但是当我尝试在任何地方包含装饰器时，都会出现此错误： Decorators are not supported yet in 6.x pending proposal update. 我查看了babel问题追踪器，但在那儿找不到任何内容，因此我假设我使用的是错误的。我的webpack配置（相关位）： loaders: [ { loader: 'babel', exclude: /node_modules/, include: path.join(__dirname, 'src'), test: /\.jsx?$/, query: { plugins: ['transform-runtime'], presets: ['es2015', 'stage-0', 'react'] } } ] 我没有其他问题，箭头功能，销毁所有功能都正常，这是唯一不起作用的方法。我知道我总是可以降级到前一段时间使用过的babel 5.8，但是如果有任何方法可以使它在当前版本（v6.2.0）中运行，它将有所帮助。

101 javascript webpack ecmascript-6 babeljs decorator

4

如何存储配置文件并使用React读取

我是React.js的新手，我实现了一个组件，在其中我从服务器获取数据并像这样使用它， CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); }); }, 我想将Url存储在配置文件中，所以当我在测试服务器或生产环境中部署Url时，我只需要更改config文件中的url（而不是js文件中的URL），但是我不知道如何在react.js中使用配置文件谁能指导我如何实现这一目标？

101 javascript reactjs configuration webpack flux

Questions tagged «webpack»