在typescript (sharepoint现代用户界面)项目中使用webpack魔术注释

Question

我用yo代码生成器创建了一个项目。yo @microsoft/sharepoint选择此键选项SharePoint Online only (latest)、webpart和react。解析成一个typescript项目。

在该项目中，我希望从SharePoint本身动态导入代码。

我的代码：

export function importOther(){
    // @ts-ignore
    import(/* webpackIgnore: true */ "https://xxx.sharepoint.com/:u:/s/anypage/xxxx");
}

但是如果我开始构建过程，我会得到这个错误：

Module not found: Error: Can't resolve 'https://sxdev.sharepoint.com/:u:/s/pn-dev-en-modern-ui2/EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA?e=Rl91Wm'

我认为typescript编译器删除了我的魔法注释：/* webpackIgnore: true */，所以webpack再次尝试解决这个问题。我不知道如何解决那个问题，你有吗？

完整日志：

npm run build

> investigation@0.0.1 build C:\__GIT\CustomWebparts\investigation
> gulp bundle

Build target: DEBUG
[13:11:30] Using gulpfile C:\__GIT\CustomWebparts\investigation\gulpfile.js
[13:11:30] Starting gulp
[13:11:30] Starting 'bundle'...
[13:11:30] Starting subtask 'configure-sp-build-rig'...
[13:11:30] Finished subtask 'configure-sp-build-rig' after 5.88 ms
[13:11:30] Starting subtask 'pre-copy'...
[13:11:30] Finished subtask 'pre-copy' after 21 ms
[13:11:30] Starting subtask 'copy-static-assets'...
[13:11:30] Starting subtask 'sass'...
[13:11:30] Finished subtask 'copy-static-assets' after 49 ms
[13:11:31] Finished subtask 'sass' after 248 ms
[13:11:31] Starting subtask 'tslint'...
[13:11:32] [tslint] tslint version: 5.12.1
[13:11:32] Starting subtask 'tsc'...
[13:11:32] [tsc] typescript version: 2.9.2
[13:11:34] Error - [tsc] src/webparts/investigation/services/reactception/reactception.ts(4,38): error TS2307: Cannot find module 'https://sxdev.sharepoint.com/:u:/s/pn-dev-en-modern-ui2/EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA?e=Rl91Wm'.
[13:11:34] Error - 'tsc' sub task errored after 2.15 s 
 exited with code 2
[13:11:34] 'bundle' errored after 3.65 s
[13:11:34]
[13:11:34] Finished subtask 'tslint' after 3.67 s
[13:11:34] ==================[ Finished ]==================
Error - [tsc] src/webparts/investigation/services/reactception/reactception.ts(4,38): error TS2307: Cannot find module 'https://sxdev.sharepoint.com/:u:/s/pn-dev-en-modern-ui2/EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA?e=Rl91Wm'.
Error - 'tsc' sub task errored after 2.15 s 
 exited with code 2
[13:11:35] Project investigation version:0.0.1
[13:11:35] Build tools version:3.9.26
[13:11:35] Node version:v10.15.3
[13:11:35] Total duration:11 s
[13:11:35] Task errors:2
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! investigation@0.0.1 build: `gulp bundle`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the investigation@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\peer.nissen\AppData\Roaming\npm-cache\_logs\2019-08-27T11_11_35_559Z-debug.log

C:\__GIT\CustomWebparts\investigation>npm run build

> investigation@0.0.1 build C:\__GIT\CustomWebparts\investigation
> gulp bundle

Build target: DEBUG
[13:12:27] Using gulpfile C:\__GIT\CustomWebparts\investigation\gulpfile.js
[13:12:27] Starting gulp
[13:12:27] Starting 'bundle'...
[13:12:27] Starting subtask 'configure-sp-build-rig'...
[13:12:27] Finished subtask 'configure-sp-build-rig' after 5.54 ms
[13:12:27] Starting subtask 'pre-copy'...
[13:12:27] Finished subtask 'pre-copy' after 16 ms
[13:12:27] Starting subtask 'copy-static-assets'...
[13:12:27] Starting subtask 'sass'...
[13:12:27] Finished subtask 'copy-static-assets' after 49 ms
[13:12:27] Finished subtask 'sass' after 201 ms
[13:12:27] Starting subtask 'tslint'...
[13:12:28] [tslint] tslint version: 5.12.1
[13:12:28] Starting subtask 'tsc'...
[13:12:28] [tsc] typescript version: 2.9.2
[13:12:31] Finished subtask 'tsc' after 2.15 s
[13:12:31] Finished subtask 'tslint' after 3.38 s
[13:12:31] Starting subtask 'post-copy'...
[13:12:31] Finished subtask 'post-copy' after 654 μs
[13:12:31] Starting subtask 'collectLocalizedResources'...
[13:12:31] Finished subtask 'collectLocalizedResources' after 4.7 ms
[13:12:31] Starting subtask 'configure-webpack'...
[13:12:32] Finished subtask 'configure-webpack' after 1.09 s
[13:12:32] Starting subtask 'webpack'...
[13:12:36] Error - [webpack] 'dist':
./lib/webparts/investigation/services/reactception/reactception.js
Module not found: Error: Can't resolve 'https://sxdev.sharepoint.com/:u:/s/pn-dev-en-modern-ui2/EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA?e=Rl91Wm' in 'C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\reactception'
resolve 'https://sxdev.sharepoint.com/:u:/s/pn-dev-en-modern-ui2/EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA?e=Rl91Wm' in 'C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\reactception'
  Parsed request is a module
  using description file: C:\__GIT\CustomWebparts\investigation\package.json (relative path: ./lib/webparts/investigation/services/reactception)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\__GIT\CustomWebparts\investigation\package.json (relative path: ./lib/webparts/investigation/services/reactception)
    resolve as module
      C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\reactception\node_modules doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\reactception\lib doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\node_modules doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\lib doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\node_modules doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\lib doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\webparts\node_modules doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\webparts\lib doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\node_modules doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\investigation\lib\lib doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\node_modules doesn't exist or is not a directory
      C:\__GIT\CustomWebparts\lib doesn't exist or is not a directory
      C:\__GIT\node_modules doesn't exist or is not a directory
      C:\__GIT\lib doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      C:\lib doesn't exist or is not a directory
      looking for modules in C:\__GIT\CustomWebparts\investigation\node_modules
        using description file: C:\__GIT\CustomWebparts\investigation\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\__GIT\CustomWebparts\investigation\package.json (relative path: ./node_modules)
          using description file: C:\__GIT\CustomWebparts\investigation\package.json (relative path: ./node_modules/https:/sxdev.sharepoint.com/:u:/s/pn-dev-en-modern-ui2/EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\__GIT\CustomWebparts\investigation\node_modules\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\__GIT\CustomWebparts\investigation\node_modules\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\__GIT\CustomWebparts\investigation\node_modules\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA.json doesn't exist
            as directory
              C:\__GIT\CustomWebparts\investigation\node_modules\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA doesn't exist
      looking for modules in C:\__GIT\CustomWebparts\investigation\lib
        using description file: C:\__GIT\CustomWebparts\investigation\package.json (relative path: ./lib)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\__GIT\CustomWebparts\investigation\package.json (relative path: ./lib)
          using description file: C:\__GIT\CustomWebparts\investigation\package.json (relative path: ./lib/https:/sxdev.sharepoint.com/:u:/s/pn-dev-en-modern-ui2/EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\__GIT\CustomWebparts\investigation\lib\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\__GIT\CustomWebparts\investigation\lib\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\__GIT\CustomWebparts\investigation\lib\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA.json doesn't exist
            as directory
              C:\__GIT\CustomWebparts\investigation\lib\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA doesn't exist
[C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\reactception\node_modules]
[C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\reactception\lib]
[C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\node_modules]
[C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\services\lib]
[C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\node_modules]
[C:\__GIT\CustomWebparts\investigation\lib\webparts\investigation\lib]
[C:\__GIT\CustomWebparts\investigation\lib\webparts\node_modules]
[C:\__GIT\CustomWebparts\investigation\lib\webparts\lib]
[C:\__GIT\CustomWebparts\investigation\lib\node_modules]
[C:\__GIT\CustomWebparts\investigation\lib\lib]
[C:\__GIT\CustomWebparts\node_modules]
[C:\__GIT\CustomWebparts\lib]
[C:\__GIT\node_modules]
[C:\__GIT\lib]
[C:\node_modules]
[C:\lib]
[C:\__GIT\CustomWebparts\investigation\node_modules\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA]
[C:\__GIT\CustomWebparts\investigation\lib\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA]
[C:\__GIT\CustomWebparts\investigation\node_modules\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA.js]
[C:\__GIT\CustomWebparts\investigation\lib\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA.js]
[C:\__GIT\CustomWebparts\investigation\node_modules\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA.json]
[C:\__GIT\CustomWebparts\investigation\lib\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA.json]
[C:\__GIT\CustomWebparts\investigation\node_modules\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA]
[C:\__GIT\CustomWebparts\investigation\lib\https:\sxdev.sharepoint.com\:u:\s\pn-dev-en-modern-ui2\EeS0ABBE6uBEgvF4AXuqZxABsug1MDofoJUuekOHEb4kuA]
 @ ./lib/webparts/investigation/services/reactception/reactception.js 3:4-151
 @ ./lib/webparts/investigation/InvestigationWebPart.js

我认为这就是微软为该项目定义的webpart.config.js。

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const path = require("path");
// Note: this require may need to be fixed to point to the build that exports the gulp-core-build-webpack instance.
const webpackTask = require('@microsoft/web-library-build').webpack;
const webpack = webpackTask.resources.webpack;
const isProduction = webpackTask.buildConfig.production;
const packageJSON = require('./package.json');
const webpackConfiguration = {
    context: __dirname,
    devtool: (isProduction) ? undefined : 'source-map',
    entry: {
        [packageJSON.name]: path.join(__dirname, webpackTask.buildConfig.libFolder, 'index.js')
    },
    output: {
        libraryTarget: 'umd',
        path: path.join(__dirname, webpackTask.buildConfig.distFolder),
        filename: `[name]${isProduction ? '.min' : ''}.js`
    },
    devServer: {
        stats: 'none'
    },
    // The typings are missing the "object" option here (https://webpack.js.org/configuration/externals/#object)
    externals: {
        'react': {
            amd: 'react',
            commonjs: 'react'
        },
        'react-dom': {
            amd: 'react-dom',
            commonjs: 'react-dom'
        }
    },
    plugins: [
    // new WebpackNotifierPlugin()
    ]
};
if (isProduction && webpackConfiguration.plugins) {
    webpackConfiguration.plugins.push(new webpack.optimize.UglifyJsPlugin({
        mangle: true,
        compress: {
            dead_code: true,
            warnings: false
        }
    }));
}
exports = webpackConfiguration;
//# sourceMappingURL=webpack.config.js.map

我能给你的信息太多了。希望我选择了正确的信息。如果你需要更多的信息，也许最好的方法是创建你自己的way部件项目，但如果你问我，我会试着为你提供更多的信息。

编辑:我只能找到@microsoft node_modules的tsconfig.json：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
// adding this:    "removeComments": false, didn't helped
    "outDir": "../../lib/api"
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "../../node_modules",
    "../../dist",
    "../../lib"
  ]
}

"extends": "../../tsconfig.json"链接到：

"use strict";
// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
// See LICENSE in the project root for license information.
Object.defineProperty(exports, "__esModule", { value: true });
const path = require("path");
const node_core_library_1 = require("@microsoft/node-core-library");
const glob = require("glob");
const globEscape = require("glob-escape");
const decomment = require("decomment");
const RSCTask_1 = require("./RSCTask");
const TsParseConfigHost_1 = require("./TsParseConfigHost");
/**
 * @beta
 */
class TscCmdTask extends RSCTask_1.RSCTask {
    constructor() {
        super('tsc', {
            staticMatch: [
                'src/**/*.js',
                'src/**/*.json',
                'src/**/*.jsx'
            ],
            removeCommentsFromJavaScript: false
        });
    }
    loadSchema() {
        return node_core_library_1.JsonFile.load(path.resolve(__dirname, 'schemas', 'tsc-cmd.schema.json'));
    }
    executeTask() {
        this.initializeRushStackCompiler();
        // Static passthrough files.
        const srcPath = path.join(this.buildConfig.rootPath, this.buildConfig.srcFolder);
        const libFolders = [this.buildConfig.libFolder];
        if (this.buildConfig.libAMDFolder) {
            libFolders.push(this.buildConfig.libAMDFolder);
        }
        if (this.buildConfig.libES6Folder) {
            libFolders.push(this.buildConfig.libES6Folder);
        }
        if (this.buildConfig.libESNextFolder) {
            libFolders.push(this.buildConfig.libESNextFolder);
        }
        const resolvedLibFolders = libFolders.map((libFolder) => path.join(this.buildConfig.rootPath, libFolder));
        const promises = (this.taskConfig.staticMatch || []).map((pattern) => node_core_library_1.LegacyAdapters.convertCallbackToPromise(glob, path.join(globEscape(this.buildConfig.rootPath), pattern)).then((matchPaths) => {
            for (const matchPath of matchPaths) {
                const fileContents = node_core_library_1.FileSystem.readFile(matchPath);
                const relativePath = path.relative(srcPath, matchPath);
                for (const resolvedLibFolder of resolvedLibFolders) {
                    const destPath = path.join(resolvedLibFolder, relativePath);
                    node_core_library_1.FileSystem.writeFile(destPath, fileContents, { ensureFolderExists: true });
                }
            }
        }));
        const typescriptCompiler = new this._rushStackCompiler.TypescriptCompiler({ customArgs: this.taskConfig.customArgs }, this.buildFolder, this._terminalProvider);
        const basePromise = typescriptCompiler.invoke();
        if (basePromise) {
            promises.push(basePromise);
        }
        let buildPromise = Promise.all(promises).then(() => { });
        if (this.taskConfig.removeCommentsFromJavaScript === true) { // removing this if statement with body didn't help
            buildPromise = buildPromise.then(() => this._removeComments(this._rushStackCompiler.ToolPackages.typescript));
        }
        return buildPromise;
    }
    _onData(data) {
        // Log lines separately
        const dataLines = data.toString().split('\n');
        for (const dataLine of dataLines) {
            const trimmedLine = (dataLine || '').trim();
            if (!!trimmedLine) {
                if (trimmedLine.match(/\serror\s/i)) {
                    // If the line looks like an error, log it as an error
                    this.logError(trimmedLine);
                }
                else {
                    this.log(trimmedLine);
                }
            }
        }
    }
    _removeComments(typescript) {
        const configFilePath = typescript.findConfigFile(this.buildConfig.rootPath, node_core_library_1.FileSystem.exists);
        if (!configFilePath) {
            return Promise.reject(new Error('Unable to resolve tsconfig file to determine outDir.'));
        }
        // tslint:disable-next-line:typedef
        const tsConfig = typescript.parseJsonConfigFileContent(node_core_library_1.JsonFile.load(configFilePath), new TsParseConfigHost_1.TsParseConfigHost(), path.dirname(configFilePath));
        if (!tsConfig || !tsConfig.options.outDir) {
            return Promise.reject('Unable to determine outDir from TypesScript configuration.');
        }
        return node_core_library_1.LegacyAdapters.convertCallbackToPromise(glob, path.join(globEscape(tsConfig.options.outDir), '**', '*.js')).then((matches) => {
            for (const match of matches) {
                const sourceText = node_core_library_1.FileSystem.readFile(match);
                const decommentedText = decomment(sourceText, {
                    // This option preserves comments that start with /*!, /**! or //! - typically copyright comments
                    safe: true
                });
                node_core_library_1.FileSystem.writeFile(match, decommentedText);
            }
        });
    }
}
exports.TscCmdTask = TscCmdTask;
//# sourceMappingURL=TscCmdTask.js.map

Answer 1

TypeScript可能正在删除这些评论。您需要验证tsconfig.json文件中的removeComments配置选项。

Here is the full list of compiler options。默认情况下，removeComments为false，因此可以完全省略或显式设置为false。正如文档所述，它将：

删除除以/*开头的右侧标题注释之外的所有注释！

如果启用了此选项，则很可能是问题所在。

你也可以分享你的tsconfig.json来确认吗？

Answer 2

试一试

"module": "esnext",
"moduleResolution": "node",

在你的tsconfig.json中

来源：https://davidea.st/articles/webpack-typescript-code-split-wont-work