如何在Shopify中使用assets文件夹以外的本地文件夹？

这些node/modules、dev/js这类文件夹并非直接部署在Shopify服务器上，而是本地开发环境的专属结构，前端浏览器开发者工具里能看到它们，是因为启用了Source Map映射，把压缩后的资产文件关联回本地的原始源码目录。具体实现流程如下：

核心原理 #

Shopify主题仅允许上传官方规定的标准目录（assets、templates、sections、snippets等），开发者会把未压缩的JS/CSS源码、依赖包（node_modules）放在本地专属的开发目录中，通过构建工具将源码打包压缩后输出到assets文件夹，同时生成Source Map文件。浏览器加载压缩文件时，会通过Source Map反向映射到本地的原始文件结构，让你在开发者工具里看到dev/js这类目录。

具体实现步骤 #

1. 搭建Shopify本地开发环境
   用Shopify CLI初始化主题项目：

   shopify theme init my-theme
   

   在本地项目根目录创建dev/js、dev/scss等开发目录，存放未压缩的源码文件；通过npm install安装依赖，生成本地的node_modules文件夹。

2. 配置构建工具（以Webpack为例）
   配置Webpack将dev/js里的源码打包压缩到assets文件夹，同时生成Source Map：

   • 在webpack.config.js中设置入口、输出路径并启用Source Map：

     const path = require('path');
     
     module.exports = {
       entry: './dev/js/main.js',
       output: {
         filename: 'main.min.js',
         path: path.resolve(__dirname, 'assets')
       },
       devtool: 'source-map' // 生成Source Map文件
     };
     

   • 添加构建脚本到package.json：

     "scripts": {
       "build": "webpack --mode production",
       "watch": "webpack --mode development --watch"
     }
     

3. 配置Source Map路径映射
   确保Source Map能正确关联到本地的dev/js目录，避免路径错乱。可通过Webpack的output.sourceMapFilename参数或调整devtool类型，让浏览器能准确解析原始文件的位置。

4. 上传主题时排除本地开发目录
   编辑.gitignore文件，排除不需要上传的本地目录：

   node_modules/
   dev/
   .DS_Store
   

   用Shopify CLI上传主题时，这些目录会被自动忽略，只有assets、templates等标准目录会被同步到Shopify后台。

5. 本地开发预览
   执行shopify theme dev启动本地预览，修改dev/js里的源码后，构建工具会自动重新打包并同步到预览环境，此时浏览器开发者工具里就能看到dev/js的原始目录结构。

关于付费主题（如Sahara）的说明 #

这类付费主题的开发者会把原始源码（dev目录、node_modules）保留在本地，仅将构建后的assets文件和标准主题目录上传到Shopify主题商店。因此你下载主题时只能拿到压缩后的生产文件，看不到原始的开发目录。

你之前尝试的误区 #

你用Webpack/Gulp没复现效果，大概率是因为没正确配置Source Map，或者没有将本地开发目录和Shopify上传目录做隔离。只要确保Source Map生成正确，并且本地开发目录不上传，就能实现浏览器里显示原始文件夹结构的效果。

内容的提问来源于stack exchange，提问作者Stawros Koutis