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

Posted 2023-03-13

【中文标题】安装后的 webpack 在加载打字稿时失败

【英文标题】：webpack on postinstall fails on loading typescript

【发布时间】：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

【参考方案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 弄明白很痛苦，所以我希望这对其他人有所帮助