webpack 无法在同一个Typescript文件中调用其他函数

btxsgosb  于 7个月前  发布在  Webpack
关注(0)|答案(1)|浏览(58)

我正在从Typescript文件导入函数:
第一个月
myExportedFunction函数调用同一文件中的非导出函数:

const myNonExportedFunction = () => {
    ... code ...
}

export const myExportedFunction = () => {
    myNonExportedFunction();

    ... more code ...
}

字符串
当我运行它时,我得到:Uncaught Reference error: 'myNonExportedFunction' is not defined。如果我用myNonExportedFunction内部的代码替换函数调用,一切都正常。
为什么我得到这个错误?上下文:这段代码是一个Chrome插件。
tsconfig:

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "Node16",
    "moduleResolution": "Node16",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}


webpack.config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        index: [
            "regenerator-runtime/runtime.js",
            path.resolve(__dirname, "src", "Index.tsx"),
        ],
        background: path.resolve(__dirname, "src", "background.ts"),
        "content-scripts": path.resolve(__dirname, "src", "content-scripts.ts"),
        "ninjas-content-script": path.resolve(__dirname, "src", "ninjas-content-script.ts"),
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist"),
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: [{ from: "public" }],
        }),
        new HtmlWebpackPlugin({
            filename: "index.html",
            chunks: ["index"],
        }),
        new MiniCssExtractPlugin({
            filename: 'styles/[name].css',
        }),
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: "ts-loader",
                        options: {
                            compilerOptions: {noEmit: false},
                        },
                    },
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
        ],
    },
};

2wnc66cl

2wnc66cl1#

通过将所有函数 Package 在另一个函数中使其工作。

export function myWrapperFunction() {
    // previously 'myNonExportedFunction'
    function myHelperFunction() {
        ... code ...
    }

   // previously 'myExportedFunction'
   function myFunction() {
        myHelperFunction();
      
        ... more code ...
    }

    myFunction();
}

字符串
如果你有多个导出的函数,并且都需要使用非导出的函数,那么我认为非导出的函数必须是重复的,或者在myFunction被调用的地方,一些逻辑必须决定调用一个合适的方法。

相关问题