Packing
基于webpack的前端集成开发环境和编译环境
Introduction
- 由于react的流行,公司越来越多的项目都希望使用react来构建,但目前公司的前端工具FEKit不能很好的支持react开发和编译
- 有些部门已经使用了react,但在实施过程中或多或少的遇到了一些问题,这些问题具有一些共性,其实可以使用统一的方案来解决
- 无线touch团队在过往的工作中在前端工程化和react方面积累了不少经验,愿意进行技术分享和全公司内推广
- 只关心通用的集成开发环境和编译过程,不关心网站的架构和目录结构
- 部分灵感来源于grunt和Yeoman
Install
- 安装
yo
和generator-packing
npm install -g yo generator-packing
- 生成你的网站
yo packing
- 启动开发模式
npm run serve
-
在浏览器中预览网站
http://localhost:8081
-
其他命令
# 编译工程
npm run build
# 不同环境下编译工程
npm run build:dev
npm run build:beta
npm run build:prod
# 编译并预览编译结果,端口8080
npm run serve:dist
# 启动不带webpack-dashboard的开发环境
npm run serve:normal
# 启动时自动打开浏览器功能
npm run serve -- --open_browser
npm run serve -- -o
# 启动时强制清除DLL缓存功能
npm run serve -- --clean_cache
npm run serve -- -c
Features
- [x]react支持
- [x]HMR
- [x]动态加载
- [x]支持自定义打包规则和指定common.js
- [x]yo-generator
- [x]urlrewrite/自定义路由规则
- [x]支持SPA/多入口网站/React Native
- [x]支持多种资源的引入,如images、fonts、json
- [x]大size图片在css中引用hash自动更新
- [x]使用babel,支持ES6/7
- [x]统一的eslint语法检查
- [x]less、sass支持
- [x]使用postcss预编译
- [x]支持source map
- [x]支持资源hash rename
- [x]预览编译后的内容
- [x]不同环境使用profiles文件
- [x]redux-devtools
- [x]性能:不常修改的common包支持编译结果缓存
- [x]支持多种模版
Todo
- [ ]文档
- [ ]页面初始化数据支持代理服务器功能
- [x]example
- [x]base
- [x]custom template
- [x]react + redus
- [x]common chunks
- [x]url rules
- [x]data mock
- [x]profiles
- [ ]unit test
- [x]es6 decorator
- [ ]动态require,更新reduce
- [x]packing-profile-webpack-plugin支持webpack2
- [ ]升级eslint-plugin-jsx-a11y@^3.0.2(eslint-config-airbnb@13.0.0配置有误,暂不升级)
- [ ]Replace NPM with yarn(Nested bin bug yarnpkg/yarn#1210)
Directory
.
├── /bin/
│ ├── /packing-build.js
│ ├── /packing-serve:dist.js
│ ├── /packing-serve.js
│ └── /packing.js
├── /config/
│ ├── /packing.js # 构建工具相关配置
│ ├── /webpack.build.babel.js # webpack编译环境配置文件
│ ├── /webpack.dll.babel.js # DllPlugin插件编译配置
│ └── /webpack.serve:dist.js # webpack预览编译后结果的配置文件
├── /examples/ # 例子
├── /generator-packing/ # Yeoman generator
├── /scripts/ # 开发辅助工具脚本
├── /util/ # util
├── .babelrc # babel配置
├── .eslintrc # eslint配置
├── package.json
└── README.md
约定
- 网页模版中对静态资源引用时使用绝对路径,如
<script src='/logo/qunar.png'>
- CSS文件引用
assets
中的静态资源时使用波浪线~
开头的相对路径,下面的css能引用到assets/images/packing-logo.png
background: url(~images/packing-logo.png)
使用镜像源安装npm
# npm使用qunar源
npm install --registry http://registry.npm.corp.qunar.com --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
# 淘宝源
npm install --registry https://registry.npm.taobao.org
# 只安装dependencies,不安装devDependencies,适用于QDR编译机
npm install --registry http://registry.npm.corp.qunar.com --production
FAQ
如何配置和线上环境一样的路由
在config/packing中配置路由规则
路由规则修改后不生效
路由规则修改后需要重启npm run serve
eslint错误太多了
根据团队的实际代码风格,修改 .eslintrc
js文件中如何使用图片、字体等静态资源
假设文件目录结构如下:
├── /hotel/
│ └── /entries/
│ └── /index.js
└── /assets/
└── /images/
└── /logo.png
有两种方式能将静态资源引入JavaScript中:
- 使用webpack的require机制(推荐) require或import时使用静态资源相对路径,有两种相对路径可用:
-
静态文件相对于当前JavaScript文件的相对路径
// index.js import logo from '../../assets/images/logo.png';
当文件目录层级比较深时,这种方式书写较费劲
-
静态文件相对于
assets
的相对路径// index.js import logo from 'images/logo.png';
这种方式比较简洁 无论使用上述哪种方式引入的静态资源,使用时都必须使用绝对路径
// index.js import logo from '../../assets/images/logo.png'; // import logo from 'images/logo.png'; var a = new Image(); a.src = `/${logo}`;
2. 手动拼资源的URL地址,获取到静态资源的uri地址 `process.env.CDN_ROOT`,从而手工拼接url,这种方式引入的静态资源不会做md5
```js
// index.js
var a = new Image();
a.src = process.env.CDN_ROOT + '/images/logo.png';
webpackJsonp is not defined
可能配置了common chunks,公共文件打到了vendor.js,需要在页面引用vendor.js,
<script src="/vendor.js"></script>
如果vendor.js引用了css,页面还需要引用vendor.css
<link href="/vendor.css" media="all" rel="stylesheet" />
dll_vendor:Uncaught ReferenceError: webpack_require is not defined
vendor.js里没有打入任何js,检查packing.js的 commonChunks.vendor
配置
网页需要引入一个less文件,但这个网页没有js文件,我应该如何把这个less编译成css
在 config/packing.js 的 entries
添加这个less文件,如
entries: {
abc: './src/entries/abc.less'
// 需要输出到不同路径的话可以随意修改key值
// 'test/abc': './src/entries/abc.less'
}
编译时会把 abc.less
编译成 prd/css/abc-xxxxxxxx.css
,同时html中的引用也会自动更新
<!--编译前html代码-->
<link href="/abc.css" rel="stylesheet" />
<!--编译后html代码-->
<link href="/abc-xxxxxxxx.css" rel="stylesheet" />
如何模拟数据
请查看数据模拟文档
本地编译正常,在编译服务器上发布时却提示找不到某些依赖包
本地开发时用的npm安装命令是 npm install
,它会devDependencies
和dependencies
包含的所有包,为了减少不必要的包安装、提高安装速度,在编译服务器上用的npm安装命令是 npm install --production
,它只会安装dependencies
下的包。出现这种情况是因为包的位置摆放错误,你需要把在编译服务器上提示找不到的这些包从devDependencies
移动到dependencies
下。
schema和job参数怎么配置
fe.xxx.build_method=node
#fe.xxx.build_command:
npm-cache打包成功,但解压失败
可能是 npm-cache
内部指定的node版本和 build.sh
中指定的node版本不一致,改成相同的node版本即可