babel-plugin-angularjs-annotate 仅使用 AngularJS ^1.8.0 和 Webpack 中断一次服务注入答案

【问题标题】：babel-plugin-angularjs-annotate breaks only one single service injection with AngularJS ^1.8.0 and Webpackbabel-plugin-angularjs-annotate 仅使用 AngularJS ^1.8.0 和 Webpack 中断一次服务注入
【发布时间】：2021-03-08 07:58:05
【问题描述】：

我们正在开发一个带有 ES6 模块的 AngularJS 应用程序。我们使用 webpack 和 babel 来转换和打包我们的代码，使用 babel-plugin-angularjs-annotate 插件来自动处理 DI。

问题出现在单个服务上，我们称之为MainController。它的依赖是$log、$scope、$uibModal和MainApi，这是一个自定义服务。

用/* @ngAnnotate */ 装饰这个导出的函数，结果如下：

var MainController = function ($log, $scope, $uibModal, _MainApi) { /*...*/ }
// -----------------------------------------------------^ Why the underscore?
MainController.$inject = ['$log', '$scope', '$uibModal', '_MainApi'];
// -------------------------------------------------------^ Why the underscore?
export default MainController;

如你所见，MainApi 没有被注入，而是被转换为_MainApi。代码的其他部分的其他服务也依赖MainApi，并且它被正确地注入到这些服务中。

删除/* @ngInject */“装饰器”也会删除代码的$inject部分，这自然也不起作用。

是什么导致单次注入参数获得前缀，我们如何防止这种情况发生？同样，除了这个实例之外，几乎所有其他 DI 组件都已正确注入并正常工作。

这是我们的.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": ["last 2 versions", "safari >= 7"]
                }
            }
        ],
        ["@babel/preset-react"]
    ],
    "plugins": [["angularjs-annotate", { "explicitOnly": true }]]
}

和 webpack 配置

const path = require('path');

var pluginCopy = require('./webpack/plugin-copy-docker');
var loadEnv = require('./webpack/load-env');
var rules = require('./webpack/module-rules');
var PACKAGE = require('./package.json');
var version = PACKAGE.version;
var zipPlugin = require('webpack-zip-files-plugin');

module.exports = function ( env) {
    var config = loadEnv( env.ENV);
    var configFilename = '__config.php';

    return {
        mode: config['ENV_MODE'],
        entry: {
            main: path.resolve('app/proto', 'app.js'),
        },
        output: {
            path: path.resolve(__dirname, 'dist/www'),
        },
        module: {
            rules: rules,
        },
        resolve: {
            alias: {
                'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
            }
        },
        plugins: [
            pluginCopy(configFilename),
            new zipPlugin({
                entries: [
                    { src: path.join(__dirname, './dist'), dist: './' },
                ],
                output: path.join(__dirname, './proto-docker-v'+version),
                format: 'zip',
            })
        ],
    };
};

这里是规则

const path = require('path')

module.exports =  [
    {
        test: /\.(js|jsx)$/, exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }
    },
    {
        test: /\.html$/, exclude: /node_modules/, loader: 'html-loader'
    },
    {
        test: /\.css$/,
        loader: [ 'style-loader', 'css-loader'],
    },
    {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&minetype=application/font-woff',
    },
    {
        test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
    },
    {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
    },
    {
        test: /\.svg$/,
        use: ['svg-inline-loader'],
    }
]

【问题讨论】：

标签： javascript angularjs webpack babeljs

【解决方案1】：

这是由 @babel/plugin-transform-function-name 插件引起的，该插件会转换函数名称，并且偶尔会在现有变量名称前加上下划线。有关详细信息，请参阅此 GitHub 讨论：https://github.com/babel/babel/discussions/12067

这可以通过排除插件来解决：

{
   "presets": [
      ["@babel/preset-env", {
         "exclude": ["transform-function-name"]
      }]
   ]
}

【讨论】：