javascript - 第三方 packageas 中 "require(./....."的 Webpack 捆绑问题

Question

我正在编写一个需要代码编辑器的 Electon 应用程序。我使用 react 作为渲染器，所以我决定使用 react-ace。 https://github.com/securingsincity/react-ace

一切正常，直到我尝试添加 emmet。 据我所知，我必须自己导入 emmet 包。 因此，在我呈现编辑器的组件上，我添加了导入

import 'emmet';
import * as React from 'react';
import AceEditor from 'react-ace';
import 'brace/ext/emmet';
import 'brace/mode/html';
import 'brace/mode/css';
import 'brace/theme/idle_fingers';
....

捆绑有效，但是当我运行该应用程序时，出现以下控制台错误:

Uncaught Error: Cannot find module './utils/common'

有问题的代码行可以在/node_modules/emmet/lib/emmet.js 第 10 行找到

var utils = require('./utils/common');

我正在使用 webpack 和 typescript。

包.json

{
   ....
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/history": "^4.7.2",
    "@types/jsdom": "^12.2.3",
    "@types/ncp": "^2.0.1",
    "@types/node": "^11.11.2",
    "@types/react": "^16.8.7",
    "@types/react-dom": "^16.8.2",
    "@types/react-redux": "^7.0.3",
    "@types/react-router-dom": "^4.3.1",
    "@types/redux-logger": "^3.0.7",
    "@types/styled-components": "^4.1.12",
    "@types/webpack-env": "^1.13.9",
    "brace": "^0.11.1",
    "concurrently": "^4.1.0",
    "connected-react-router": "^6.3.1",
    "copy-webpack-plugin": "^5.0.0",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "electron": "^4.0.5",
    "electron-builder": "^20.38.4",
    "electron-devtools-installer": "^2.2.4",
    "electron-log": "^3.0.1",
    "electron-updater": "^4.0.6",
    "emmet": "^1.6.3",
    "history": "^4.7.2",
    "html-webpack-plugin": "^3.2.0",
    "i18next": "^15.0.6",
    "jsdom": "^14.0.0",
    "mini-css-extract-plugin": "^0.5.0",
    "moment": "^2.24.0",
    "ncp": "^2.0.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "prettier": "^1.15.3",
    "react": "^16.8.4",
    "react-ace": "^6.4.0",
    "react-dom": "^16.8.4",
    "react-hot-loader": "^4.8.0",
    "react-i18next": "^10.4.1",
    "react-redux": "^6.0.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-test-renderer": "^16.7.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "rxjs": "^6.4.0",
    "sass-loader": "^7.1.0",
    "sb-fs": "^3.0.0",
    "style-loader": "^0.23.1",
    "styled-components": "^4.1.3",
    "ts-loader": "^5.3.3",
    "tslint": "^5.13.0",
    "typescript": "^3.3.3333",
    "typescript-plugin-styled-components": "^1.3.0",
    "webpack": "^4.29.5",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.1.5"
  },
  "browserslist": "electron 1.6"
}

webpack.common.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
            },
            // https://github.com/ashtuchkin/iconv-lite/issues/205
            {
                test: /node_modules[\/\\](iconv-lite)[\/\\].+/,
                resolve: {
                    aliasFields: ['main']
                }
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx', '.json']
    },
    output: {
        path: path.resolve(__dirname, '..', 'dist'),
    },
    plugins: [
        new webpack.EnvironmentPlugin(['NODE_ENV', 'PORT', 'HOT']),
    ]
};

webpack.renderer.prod.config.js

module.exports = merge.smart(baseConfig, {
    devtool: 'none',
    mode: 'development',
    target: 'electron-renderer',

    entry: [
        'react-hot-loader/patch',
        `webpack-dev-server/client?http://localhost:${port}/`,
        'webpack/hot/only-dev-server',
        path.join(__dirname, '..', 'src', 'app', 'renderer', 'index.tsx'),
    ],

    output: {
        publicPath,
        filename: 'renderer.dev.js'
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
                options: {
                    getCustomTransformers: () => ({before: [styledComponentsTransformer]}),
                }
            },
            {
                test: /\.(s?css|)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /node_modules[\/\\](emmet)[\/\\].+/,
                resolve: {
                    modules: ['node_modules/emmet/lib'],
                }
            }

        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin({
            multiStep: true
        }),
    ],

    node: {
        __dirname: false,
    },

    devServer: {
        port,
        publicPath,
        compress: true,
        noInfo: true,
        stats: 'errors-only',
        inline: true,
        lazy: false,
        hot: true,
        headers: {'Access-Control-Allow-Origin': '*'},
        contentBase: path.join(__dirname),
        watchOptions: {
            aggregateTimeout: 300,
            ignored: /node_modules/,
            poll: 100
        },
        historyApiFallback: {
            verbose: true,
            disableDotRule: false
        },
        before() {
            if (process.env.HOT) {
                console.log('Building main...');
                spawn('npm', ['run', 'dev-main'], {
                    shell: true,
                    env: process.env,
                    stdio: 'inherit'
                })
                    .on('close', code => process.exit(code))
                    .on('error', spawnError => console.error(spawnError));
            }
        }
    }
});

Answer 1

尝试使用https://github.com/emmetio/expand-abbreviation包代替。 emmet 是旧包，不再支持