什么是 isomorphic-loader？
Isomorphic-loader 是一个 npm 包，它可以让你可以在同一份代码中使用服务器端和客户端的代码。这意味着你可以把一些仅仅用在服务器端或仅仅用在客户端的代码整合在一起，从而减少代码冗余并提升代码的可读性和可维护性。
如何使用 isomorphic-loader？
首先，你需要在你的代码中安装 isomorphic-loader：
npm install isomorphic-loader --save-dev
接着，在你的代码中，需要创建一个用于 isomorphic-loader 配置的文件（通常命名为 isomorphic-config.js），代码如下所示：
module.exports = {
assets: ['./client/assets'],
outputPath: './public',
webpackConfig: './webpack.config.js',
nodeModulesDir: './node_modules'
};这个文件的作用是指导 isomorphic-loader 如何加载你的代码。其中，assets 代表客户端代码路径，outputPath 代表最终打包输出到浏览器的代码路径，webpackConfig 代表用于构建客户端代码的 webpack 配置文件路径，nodeModulesDir 代表 Node.js 模块路径。
在代码中，你可以这样使用 isomorphic-loader：
-- -------------------- ---- ------- ------ ---------------- ---- -------------------- ------ --------- ---- ----------------- -------------------------------------------- -- - -- --------- ----------------- ---- ---------- -- ---- --------- ----------------- -- ----- ------- ----- --------- ------ ---------------------------------- ---------------------- ----------- ---
isomorphic-loader 可以通过 process 对象来区分客户端和服务器端的代码。
示例代码
下面是一个示例代码，它演示了如何使用 isomorphic-loader。
首先，在工程根目录下创建 isomorphic-config.js 文件：
module.exports = {
assets: ['./client/assets'],
outputPath: './public',
webpackConfig: './webpack.config.js',
nodeModulesDir: './node_modules'
};其中，./client/assets 代表客户端代码路径，./public 代表最终打包输出到浏览器的代码路径，./webpack.config.js 代表用于构建客户端代码的 webpack 配置文件路径，./node_modules 代表 Node.js 模块路径。
接着，我们创建 component.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
-- ------
-- ------------------------ -
----- -- - --------------
-- ---------------
-------------- - ----- -- -
----- ------- - ------------------------------------ --------
------------------
--
-- -----
- ---- -
-------------- - -- -- -
------ ---------- -------------
--
-这个代码中，我们在服务器端使用 fs 模块读取了一个 data.txt 文件的内容，并将其打印到了控制台上；而在客户端代码中，我们只简单地返回了一个包含 "Hello world!" 的 div 元素。
最后，我们在 index.js 文件中使用 isomorphic-loader：
-- -------------------- ---- ------- ------ ---------------- ---- -------------------- ------ --------- ---- ----------------- -------------------------------------------- -- - -- --------- ----------------- ---- ---------- -- ---- --------- ----------------- -- ----- ------- ----- --------- ------ ---------------------------------- ---------------------- ----------- ---
通过这段代码，我们成功地将服务器端代码和客户端代码整合在了一起，并通过 isomorphic-loader 实现了将同一份代码运行在客户端和服务器端的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65956