Question

我目前正在开发使用typescript@2.3.4 with angular 5和webpack 2.2.1进行捆绑的应用程序。我在本地构建它（在根目录中有node_modules）并且它工作正常但现在我正在尝试将它部署在需要使用存储在不同目录中的预制node_modules的环境中。起初我收到以下错误：

ERROR in Entry module not found: Error: Can't resolve 'awesome-typescript-loader' in ‘/path/to/your/app’

但是我通过在我的webpack配置中添加以下行来摆脱它：

resolve:{
    modules:['absolute/path/to/node_modules',helpers.root('src')]
},
resolveLoader:{
    modules:['absolute/path/to/node_modules']
}

上一个错误消失了，但我收到了新的错误，尽管添加了resolve参数：

ERROR in [at-loader] ./src/main.ts:1:40 
TS2307: Cannot find module '@angular/platform-browser-dynamic'.

ERROR in [at-loader] ./src/main.ts:2:32 
    TS2307: Cannot find module '@angular/core'.

ERROR in [at-loader] ./src/main.ts:6:5 
    TS2304: Cannot find name 'process'.

ERROR in [at-loader] ./src/polyfills.ts:3:1 
    TS2304: Cannot find name 'require'.

ERROR in [at-loader] ./src/polyfills.ts:5:5 
    TS2304: Cannot find name 'process'.

这些并非我收到的所有错误，更像是一个导入/需要 - 一个错误。

我还需要做些什么来“告知”webpack它应该在不同的node_modules位置寻找模块吗？附加完整的webpack配置以获取更多信息：

常用文件

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor':'./src/vendor.ts',
        'main': ['./src/main.ts','./src/styles.css']
    },
    node: {
        fs: "empty",
        net:"empty"
    },
    output: {
        path: `${__dirname}/../dist`,
        publicPath: '/',
        filename: '[name].js',
        sourceMapFilename: '[name].map'
    },

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('src', 'tsconfig.json') }
                    }, 'angular2-template-loader'
                ]
            },

            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
           {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), 
            {} 
        ),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['main','vendor','polyfills']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

prod配置文件

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',

    output: {
        path: helpers.root('/../path/to/prod/dist'),
        publicPath: '/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].chunk.js'
    },
    resolve:{
        modules:['/path/to/node_modules',helpers.root('src')]
    },
    resolveLoader:{
        modules:['/path/to/node_modules']
    },

    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                keep_fnames: true
            }
        }),
        new ExtractTextPlugin('[name].[hash].css'),
        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(ENV)
            }
        }),
        new webpack.LoaderOptionsPlugin({
            htmlLoader: {
                minimize: false
            }
        })
    ]
});

Answer 1

要解决，只需在您的tsconfig.json中插入：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react", // I use react 
    "module": "es6",
    "moduleResolution": "yourModulleResolutionHere",
    "sourceMap": true,
    "target": "es5",
    "lib": ["es2015", "dom"]
  },
  "exclude": [
    "node_modules"
  ]
}

希望有帮助！

当node_modules在不同的包中时，将项目与webpack捆绑在一起时“找不到模块”错误

1 个答案: