javascript - webpack 以与其他 js 文件相同的方式解析 node_modules
问题描述
我已经接管了一个使用 webpack 的项目,我对它是如何挂在一起的还不太熟悉,但是在将代码从项目中移出到 npm 包中时我遇到了问题——我们正在尝试制作一些 js npm 包所以我们可以在多个项目中重用它们。
这是一个示例 - 如果我在项目中有以下代码:
const combinedFilters = {
...currentFilters,
...filters,
};
这将毫无问题地编译,但是如果我将它移动到 npm 包中,我会收到以下错误:
模块解析失败:C:\Code Team Services\Web\SiteFiles\src\node_modules\@private\search\filter\SearchBaseFilter.js Unexpected token(31: 6) 您可能需要适当的加载程序来处理此文件类型。 | // 将新过滤器与旧过滤器结合起来。 | 常量组合过滤器 = { | ...当前过滤器, | ...过滤器, | };
这是我的 webpack 配置 - 我可以在这里添加(或删除)一些东西来让加载器也解析 npm 包吗?
/* eslint-disable func-names, no-useless-escape, object-shorthand */
// modules
const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');
// webpack plugins
const AssetsPlugin = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
// load base configuration.
const baseConfig = require('./webpack.config');
// Get paths.
const paths = require('../core/paths');
module.exports = merge.smart(baseConfig, {
cache: true,
// Enable sourcemaps - see https://webpack.js.org/configuration/devtool/
// Also see the point about using Uglify in combination with devtool and webpack
// To disable sourcemaps comment out the line below
devtool: 'source-map',
// Define the entry points - each of these creates a new file.
entry: {
critical: ['sass/critical.scss'],
styleguide: ['sass/styleguide.scss'],
main: [
'webpack/hot/dev-server',
'webpack-hot-middleware/client?reload=true',
'sass/main.scss',
'js/main',
],
},
module: {
rules: [
{
test: /\.(eot|ttf|woff|woff2)(\?.+)?$/,
// Use the file-loader to include referenced fonts in dist folder.
use: ['file-loader'],
},
{
test: /\.(jpeg|jpg|gif|png|svg)(\?.+)?$/,
use: [
{
// Use the url-loader to convert images to Data URIs.
loader: 'url-loader',
options: { limit: 10000 },
},
//{
// // Use the image-webpack-loader to optimize images and reduce overall file size.
// loader: 'image-webpack-loader',
//},
],
}
],
},
output: {
// Define file naming convention - chunkhash is used to bypass the browser cache.
chunkFilename: '[name].js',
filename: '[name].js',
// Define where generated assets will be located.
path: paths.dist,
// Define URL for output file path (as above).
publicPath: paths.mvcAppPath + '/sitefiles/dist/',
},
plugins: [
// Remove existing assets from dist folder.
new CleanWebpackPlugin([paths.dist], {
exclude: ['.gitignore', 'fallback'],
root: paths.sitefiles,
}),
// Create JSON file containing the names of generated assets - used by styleguide and MVC site.
new AssetsPlugin({
filename: 'assets.json',
path: paths.dist,
}),
// Reduce number of locales loaded by Moment JS.
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
// Define constants to be accessed in source code.
new webpack.DefinePlugin({
// The Google Maps API key.
GOOGLE_MAPS_API_KEY: JSON.stringify(''),
// The URL prefix for local API calls.
URL_VIRTUAL_PATH: JSON.stringify(paths.mvcAppPath),
// This enables production mode on some modules.
'process.env': {
NODE_ENV: JSON.stringify('development'),
},
}),
// Use the ExtractTextPlugin to move CSS to a separate file.
new ExtractTextPlugin({
allChunks: true,
disable: false,
filename: '[name].css',
}),
// Write bundle statistics to file for analysis and debugging tools.
new StatsWriterPlugin({
transform(data, opts) {
const stats = opts.compiler.getStats().toJson({ chunkModules: true });
return JSON.stringify(stats, null, 2);
},
}),
// Enable HMR (https://webpack.js.org/guides/hot-module-replacement/).
new webpack.HotModuleReplacementPlugin(),
// Do not write files to disk when errors occur during bundling.
new webpack.NoEmitOnErrorsPlugin(),
],
});
这是基本的 webpack 配置:
/* eslint-disable func-names, no-useless-escape, object-shorthand */
// webpack plugins
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Get paths.
const paths = require('../core/paths');
const baseConfig = {
// These modules will be loaded outside of webpack e.g. via a CDN.
externals: {
jquery: 'jQuery',
},
// Define which loaders will be used for different file extensions.
module: {
rules: [{
test: /\.html$/,
use: [
// Use the html-loader to parse and minify HTML imports.
'html-loader',
],
},
{
test: /\.js$/,
use: [{
// Use the eslint-loader to validate the JS files before bundling.
loader: 'eslint-loader',
options: {
ignorePath: paths.eslintIgnore
},
}, ],
enforce: 'pre',
include: [paths.js],
exclude: [paths.vendor],
},
{
test: /\.js$/,
use: [{
// Use the babel-loader to transpile the JS to browser-compatible syntax.
loader: 'babel-loader',
}],
include: [paths.js],
exclude: [paths.vendor],
},
{
test: /\.(css|scss)$/,
// Use the ExtractTextPlugin to move CSS to a separate file.
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
// Use the css-loader to parse and minify CSS imports.
// N.B Sourcemaps enabled, but wont be output if devtool setting is commented out
loader: 'css-loader',
options: {
autoprefixer: false,
sourceMap: true
},
},
{
// Use the postcss-loader to add vendor prefixes via autoprefixer.
// N.B Sourcemaps enabled, but wont be output if devtool setting is commented out
loader: 'postcss-loader',
options: {
config: {
path: paths.postcssConfig
},
sourceMap: true
},
},
{
// Use the sass-loader to parse and minify CSS imports.
// N.B Sourcemaps enabled, but wont be output if devtool setting is commented out
loader: 'sass-loader?sourceMap',
options: {
sourceMap: true
},
},
],
publicPath: paths.mvcAppPath + '/sitefiles/dist/',
}),
},
{
test: /loadcss\.js$/,
use: [
// Shim fg-loadcss to access the window object.
'imports-loader?exports=>undefined',
'exports-loader?window.loadCSS',
],
exclude: [paths.js],
include: /fg-loadcss/,
},
{
test: /cssrelpreload\.js$/,
use: [
// Shim fg-loadcss to access the window object.
'imports-loader?this=>window',
],
exclude: [paths.js],
include: /fg-loadcss/,
},
{
test: /waypoints\.js$/,
use: [
// Shim waypoints to access the window object.
'exports-loader?window.Waypoint',
],
exclude: [paths.js],
include: /waypoints/,
},
{
test: /\.js$/,
use: [
// Shim videojs to force correct module syntax.
'imports-loader?this=>window&exports=>false&define=>false',
],
exclude: [paths.js],
include: /video\.js/,
},
{
test: /\.js$/,
use: [
// Shim videojs to force correct module syntax.
'imports-loader?this=>window&exports=>false&define=>false',
],
exclude: [paths.js],
include: /videojs-youtube/,
},
],
noParse: [
// Ignore prebuilt warning for videojs
/[\/\\]video\.js$/,
/[\/\\]video\.min\.js$/,
/[\/\\]videojs-youtube/,
],
},
resolve: {
alias: {
// Add aliases for common source folders.
fonts: paths.fonts,
img: paths.img,
js: paths.js,
sass: paths.sass,
vendor: paths.vendor,
// Add aliases for vendor modules.
'loadcss-core': 'fg-loadcss/src/loadcss',
'loadcss-polyfill': 'fg-loadcss/src/cssrelpreload',
'videojs-core': 'video.js/dist/video.js',
'videojs-youtube': 'videojs-youtube/dist/Youtube',
'waypoints-core': 'waypoints/lib/jquery.waypoints.js',
'waypoints-infinite': 'waypoints/lib/shortcuts/infinite.js',
'waypoints-inview': 'waypoints/lib/shortcuts/inview.js',
'waypoints-sticky': 'waypoints/lib/shortcuts/sticky.js',
},
},
};
module.exports = baseConfig;
解决方案
问题是 node_modules 通常被排除在 webpack 配置中。在您的情况下,它可能包含在paths.vendor
排除的变量中。仍应包含的路径可以添加到 include 选项中(在您的情况下,它包含 的值paths.js
)。
请参阅https://webpack.js.org/configuration/module/#rule-exclude和https://webpack.js.org/configuration/module/#rule-include。
请注意,该值也可以是数组,因此您可以保持配置不变,只需向数组添加其他包含路径或条件。
推荐阅读
- c# - 绑定在 Mvvm wpf 和 controltab 中不起作用
- python - 从另一个 Dataframe 的列中为 Dataframe 中的每一行查找特定值
- react-native - 需要有关 Flatlist 和数组的帮助
- ruby-on-rails - Rails 6 在安装了 bundler -v 2.0.2 的 Docker 上运行...您必须使用 Bundler 2 或更高版本与此锁定文件
- aws-cli - 在 JMESpath 中查找 X 和 Y 之间的所有值
- sql - 如何使用 MS SQL 以逗号分隔列
- javascript - 将 javascript 对象合并为 csv 格式
- javascript - 合并以多种方式返回的多个数组/对象
- javascript - 从 API 获取数据,然后将其发送到 EJS 文件
- google-cloud-pubsub - 为什么 Google PubSub 总是创建 60 个永久线程?