Question

我有一个为运行安装后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(),
    ],
};

当我进入包装并运行后记时，它工作正常。当我将包包含在另一个项目中时，出现打字稿错误，我不确定为什么。就像打字机加载程序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

Answer 1

我发现了我的问题。当我的项目加载到npm软件包中并且后安装触发器触发时，我的npm软件包中没有可立即使用ts-loader等的node_modules软件包。

因此，我不得不解析我的加载程序以使其适用于我的项目，而不是我的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很难弄清楚，所以我希望这对其他人有帮助

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

1 个答案: