README_CN.md

高效app脚手架

[email protected] + [email protected] + [email protected] + [email protected] + +[email protected] + [email protected] + sass

• 高效app脚手架
  • 开发环境
  • 特性
  • 第一次运行项目
  • 调试
  • 开发
  • 目录说明
  • 修改css-loader
  • 其他建议

• English version

开发环境

• 操作系统：window 10
• nodejs：10.15.0
• npm：6.9.0
• yarn：1.9.2
• 开发工具：JetBrains WebStorm 2019.1.1 x64
• 浏览器：chrome 74.0.3729.131 stable

特性

• immutablejs
• sass
• redux
• react-router
• code split
• hot load
• no cache
• stylelint
• tslint
• husky
• lint-staged

第一次运行项目

在项目根目录执行yarn

调试

• npm run devSprites：执行打包雪碧图，每次有加入新图片才运行
• npm run devServer：启动webpack-dev-server，然后打开 http://localhost:19080
  

开发

• npm run sprites：打包生产环境的雪碧图，雪碧图css文件，图片文件带有hash
• npm run src：打包生产环境的js，js文件都带有hash。效果：
  
  

目录说明

• config-ts/index.ts：主要webpack和gulp的配置

• config-ts/tsconfig-commom.json：通用的ts配置

• webpack-ts/webpack.server.config.ts：启动webpack-dev-server的配置文件

• webpack-ts/webpack.src.config.ts：编译出实际的文件，分开开发环境编译和生产环境编译

• webpack-ts/plugins/deleteFiles.ts：清空某个目录的文件

• webpack-ts/plugins/insterDataToHtml：插入webpack生成的js到html文件中，把雪碧图的url插入到html文件中

修改css-loader

说明这是为了方便定位css文件，以便在浏览器中修改
进入node_modules/css-loader/dist/index.js
注释掉如下代码

const moduleCode = `// Module\nexports.push([module.id, ${cssAsString}, ""${result.map ? `,${result.map}` : ''}]);\n\n`;

添加如下代码到对应的

let map = null
if (result.map) {
  map = result.map.toJSON()
  map.sources = map.sources.map((src) => 'file:///' + src.replace(/\\/g,'/'))
}
const moduleCode = `// Module\nexports.push([module.id, ${cssAsString}, ""${result.map ? `,${JSON.stringify(map)}` : ''}]);\n\n`;

通过chrome修改定位css，然后修改文件，这个修改会保存到本地

其他建议

1.css使用BEM规范，参考链接