Nhận các lỗi và cảnh báo khó hiểu khi cố gắng sử dụng mongoose với webpack

Question

Tôi đang sử dụng webpack để biên dịch ứng dụng phản ứng đẳng hình es6 của mình thành các gói máy khách và máy chủ, tương ứng. Tôi đã cài đặt mongoose và đang cố gắng sử dụng nó trong phần máy chủ của ứng dụng của tôi, nhưng tôi đang nhận được một số lỗi khủng khiếp trong bảng điều khiển khi tôi thử xây dựng:

WARNING in ./~/mongoose/lib/drivers/index.js Critical dependencies: 8:11-74 the request of a dependency is an expression @ ./~/mongoose/lib/drivers/index.js 8:11-74

WARNING in ./~/mongoose/lib/drivers/SPEC.md Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/mongoose/lib/drivers/SPEC.md Line 2: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | | # Driver Spec | | TODO @ ./~/mongoose/lib/drivers ^./.*$

WARNING in ./~/express/lib/view.js Critical dependencies: 78:29-56 the request of a dependency is an expression @ ./~/express/lib/view.js 78:29-56

WARNING in ./~/es6-promise/dist/es6-promise.js Module not found: Error: Cannot resolve module 'vertx' in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist resolve module vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist looking for modules in /Users/richie/Code/CreativeFlumeProjects/cf-website/src /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx doesn't exist (module as directory) resolve 'file' vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/src resolve file /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx doesn't exist /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js doesn't exist looking for modules in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx doesn't exist (module as directory) resolve 'file' vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules resolve file /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx doesn't exist /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js doesn't exist [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js] @ ./~/es6-promise/dist/es6-promise.js 132:20-30

WARNING in ./~/bson/lib/bson/index.js Critical dependencies: 20:16-29 the request of a dependency is an expression 44:18-31 the request of a dependency is an expression 71:19-32 the request of a dependency is an expression @ ./~/bson/lib/bson/index.js 20:16-29 44:18-31 71:19-32

WARNING in ./~/require_optional/index.js Critical dependencies: 63:18-42 the request of a dependency is an expression 71:20-44 the request of a dependency is an expression 78:35-67 the request of a dependency is an expression @ ./~/require_optional/index.js 63:18-42 71:20-44 78:35-67

WARNING in ./~/require_optional/README.md Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/README.md Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | # require_optional | Work around the problem that we do not have a optionalPeerDependencies concept in node.js making it a hassle to optionally include native modules | @ ./~/require_optional ^./.*$

WARNING in ./~/require_optional/LICENSE Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/LICENSE Line 1: Unexpected identifier You may need an appropriate loader to handle this file type. | Apache License | Version 2.0, January 2004 |
http://www.apache.org/licenses/ @ ./~/require_optional ^./.*$ /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900 return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }()); ^

Error: Cannot find module './node-mongodb-native'. at /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:42 at webpackContextResolve (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:90) at webpackContext (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235897:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:48684:37) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:52685:17) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:236259:15) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object.exports.contain.exports.reachTemplate.internals.Any.applyFunctionToChildren.internals.Err.toString.internals.getPath.internals.serializer.internals.annotate.internals.Response._prepare.internals.Response._processPrepare.internals.Auth.test.internals.Auth.payload.internals.Auth.response.internals.Authenticator.exports.wrap.internals.isIsoDate.internals.compare.internals.Date.min.internals.Date.max.internals.Connection._init.internals.Connection._start.internals.Connection._stop.internals.Connection._dispatch.internals.Methods._add.internals.state.internals.payload.internals.compare.internals.Number.min.internals.Number.max.internals.Number.greater.internals.Number.less.internals.Number.multiple.internals.Number.integer.internals.Number.negative.internals.Number.positive.internals.Object.length.internals.Object.min.internals.Object.max.internals.Object.assert.internals.compare.internals.String.min.internals.String.max.internals.String.creditCard.internals.String.length.internals.String.regex.internals.String.alphanum.internals.String.token.internals.String.email.internals.String.ip.internals.String.uri.internals.String.isoDate.internals.String.guid.internals.String.hex.internals.String.hostname.internals.String.lowercase.internals.String.uppercase.internals.Request.internals.Response.writeHead.internals.Topo.add.exports.execute.internals.prerequisites.internals.handler.internals.fromString.internals.pre.module.exports.internals.Plugin.internals.Plugin.register.internals.Protect.run.internals.Request.internals.Request._execute.internals.Request._lifecycle.internals.Request._invoke.internals.Server.start.internals.Server.initialize.internals.Server._start.internals.Server.stop._invoke.exports.send.internals.marshal.internals.fail.internals.transmit.internals.state.internals.input.exports.response.internals.Router.normalize.internals.parseParams.internals.Router.table.internals.Policy.get.internals.Policy._callGenerateFunc.internals.Policy.set.exports.generateKey.exports.encrypt.exports.decrypt.exports.hmacWithPassword.exports.seal.exports.unseal.internals.Array.items.internals.Array.ordered.internals.Array.min.internals.Array.max.internals.Array.length.internals.Binary.min.internals.Binary.max.internals.checkIpV6.exports.validate.internals.validate.internals.Definitions.parse.Items.serial.internals.unsign.Items.serial.internals.unsign.internals.decode.internals.Definitions.format.Items.serial.exports.prepareValue.internals.encode.internals.sign.internals.Parser.internals.Parser.parse.decoder.once.writeFile.internals.Parser.raw.decoder.once.internals.Parser.multipart.onPart.writeFile.exports.Dispenser.internals.Dispenser.internals.Client.request.internals.Client.read.internals.Client.parseCacheControl.internals.Client._shortcut.map../connection (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235702:19)

Tôi đã thử một số giải pháp tìm thấy thông qua google. Thêm ".node" vào tệp resolve.extensions của tôi, thêm trình nạp nút, cũng như một số cấu hình bổ sung cho đối tượng nút, tất cả đều không có kết quả.

Answer 1

Cấu hình webpack xử lý mã máy chủ của bạn phải có một vài tính năng bổ sung để tránh sự cố.

Hãy thử thêm những điều sau đây:

target: 'node', 
    output: { 
     ..., 
     libraryTarget: 'commonjs', 
    }, 
    externals: [ 
     /^(?!\.|\/).+/i, 
    ], 

Thiết lập target-node làm webpack lưu ý rằng bạn đang làm việc trong một bối cảnh Node, và không có trong trình duyệt. Thêm libraryTarget: 'commonjs' sẽ làm cho webpack sử dụng các cuộc gọi require đơn giản để nhận các hàm từ thư viện bên ngoài.

Sau đó, điều quan trọng xảy ra trong regex trong externals. Về cơ bản, nó loại trừ bất kỳ yêu cầu nào sử dụng đường dẫn không liên quan từ gói. Bằng cách đó, nếu bạn làm import 'react'; nó sẽ không được đóng gói bởi webpack, nhưng nếu bạn làm import './components/MyComponent.js';, nó sẽ.

Điều đó cũng có nghĩa là bạn phải đảm bảo thư mục node_modules được bao gồm trong mã máy chủ được xây dựng của bạn.

Tại sao phải làm như vậy? Vì Node sử dụng rất nhiều mô-đun gốc không thể được nhóm đúng. Chúng đặc trưng cho phiên bản Node chính xác của bạn trên hệ điều hành cụ thể của bạn và bạn không thể chỉ kéo chúng vào một gói Javascript. Bạn muốn mã của riêng bạn đi qua webpack, và tất cả các công cụ từ node_modules để chỉ được truy cập giống như bất kỳ dự án Node nào.

Bây giờ nếu bạn nhận được các cảnh báo/lỗi trong gói trình duyệt của mình, điều đó có nghĩa là bạn có thể yêu cầu/nhập các mô-đun chỉ hoạt động trên máy chủ trong gói trình duyệt của bạn. Đảm bảo bạn chỉ yêu cầu chúng trong các tệp chỉ được sử dụng trên máy chủ. Ngoài ra, có chọn lọc yêu cầu chúng. Cách bạn có thể thực hiện các yêu cầu chọn lọc dựa trên loại xây dựng có thể tìm thấy tại đây: Can I detect if my script is being processed by Webpack?