javascript - 如何使用 webpack 将全局 JS 文件包含到我的 React 项目中?

标签 javascript reactjs webpack

我第一次使用 React,我发现我需要在多个 JSX 文件中使用一些 JS 函数。

我查看了一些示例,但无法弄清楚如何正确包含我的 global.js 文件。

我的文件夹结构:

/dist
/src
  /components
  /sass
  /img
  index.js
  global.js
webpack.config.js

这是我的 webpack 文件:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/js/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

谁能告诉我如何正确包含这个文件以及它在 webpack 代码中的位置吗?

最佳答案

我不确定你需要什么,但 webpack 是你的构建系统,所以它在你想要的较低级别上运行。如果你想在不同的文件中包含函数,你需要将文件包含在你需要的地方:

global.js

module.export = {
 func1: ..,
 func2: ..
}

需要函数的文件:

var globals = require('path/to/global.js')

关于javascript - 如何使用 webpack 将全局 JS 文件包含到我的 React 项目中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37163652/

相关文章:

reactjs - 通过变量动态导入文件 - React Native

javascript - 在运行中用点替换逗号

reactjs - 有没有办法避免 CEF Windows Chromium 桌面应用程序中的 X-Frame-Options?

css - Bootstrap 4 和 SCSS - 基于基类覆盖主类

javascript - webpack-dev-server npm run dev 抛出 TypeError : Cannot set property 'port' of undefined

javascript - 使用键作为变量的 Angular 翻译不起作用

javascript - 在GWT中用JS显示HTML代码

javascript - jquery .html() 和 javascript 标签

javascript - CSS图像被子

npm - 使用 webpack 时的依赖项和 devDependencies