安装后的 webpack 在加载打字稿时失败答案

【问题标题】：webpack on postinstall fails on loading typescript安装后的 webpack 在加载打字稿时失败
【发布时间】：2020-10-06 16:33:42
【问题描述】：

我有一个包，用于运行安装后 webpack 脚本。从字面上看，如我的 package.json 中所述

"scripts": {       
   ...
   "postinstall": "webpack"
}

webpack 是这样的：

const path = require('path');

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    target: "node",
    entry: {
        Core: path.resolve(__dirname,'src/Core.ts')
    },
    devtool: 'inline-source-map',
    output: {
      filename: "[name].js",
      chunkFilename: "[name].js",
      libraryTarget: 'commonjs',
      path: path.resolve(__dirname, "dist")
    },
    externals: {
        canvas: "commonjs canvas",
    },
    resolve: {
        extensions: [".js", ".ts"]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader',
                    options:{
                        configFile: path.resolve(__dirname,"tsconfig.json")
                    }
                }],
                exclude: /node_modules/,
            }
        ]
    },
    mode: 'development',
    plugins: [
        new VueLoaderPlugin(),
    ],
};

当我在包中并运行 postscript 时，它工作正常。当我将包包含在另一个项目中时，我得到一个打字稿错误，我不知道为什么。就像打字稿加载器ts-loader 不工作一样。知道为什么吗？

ERROR in ./src/Core.ts 32:0
Module parse failed: The keyword 'interface' is reserved (32:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

【问题讨论】：

标签： typescript npm webpack package

【解决方案1】：

更多默认：

const path = require('path');

module.exports = {
  entry: {
    'my-module': './src/my-module.ts'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        // !! Do not exclude "my-module" from ts-loader
        exclude: /node_modules\/(?!my-module)/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolveLoader: {
    modules: [
      path.resolve(__dirname, '..'), // just the parent dir
      './node_modules', // normal node_modules
    ],
  },
};

【讨论】：

【解决方案2】：

好吧，我发现了我的问题。当我的项目在 npm 包中加载并且 postinstall 触发器时，我的 npm 包没有可供使用的 node_modules 包ts-loader 等。

所以我必须将我的加载器解析为我的项目而不是我的 npm 包。我将发布我的新 webpack 配置。

const path = require('path');

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    target: "node",
    entry: {
        Core: path.resolve(__dirname,'src/Core.ts')
    },
    devtool: 'inline-source-map',
    output: {
      filename: "[name].js",
      chunkFilename: "[name].js",
      libraryTarget: 'commonjs',
      path: path.resolve(__dirname, "dist")
    },
    externals: {
        canvas: "commonjs canvas",
    },
    resolve: {
        extensions: [".js", ".ts"]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader',
                    options:{
                        configFile: path.resolve(__dirname,"tsconfig.json")
                    }
                }]
            }
        ]
    },
    resolveLoader: {
        modules: [path.resolve(__dirname, '../../../node_modules'), path.resolve(__dirname, './node_modules')],
        extensions: ['.ts', '.vue', '.js'],
        mainFields: ['ts-loader', 'vue-loader', 'babel-loader']
    },
    mode: 'development',
    plugins: [
        new VueLoaderPlugin(),
    ],
};

盲从 webpack 弄明白很痛苦，所以我希望这对其他人有所帮助

【讨论】：