Need help with ie-webpack-start?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sayll
128 Stars 19 Forks MIT License 24 Commits 1 Opened issues

Description

webpack2编译打包支持到低版本IE。坑有多少?水有多深?自行体会!

Services available

!
?

Need anything else?

Contributors list

ie-webpack-start

Coverage Status  Coverage Status Coverage Status

Vue 用户请转至:vue-start

React 用户请转至:react-webpack-start

IE 9+ 用户请转至:avalon-webpack-start

重要

由于webpack不支持低版本IE下启动服务实时测试,必须通过打包才知道测试结果。 所以请用户自行在其他浏览器编写测试,最后回跑测试打包的IE 代码压缩导致无法兼容低版本IE,故取消代码压缩功能。 如有使用如Jquery第三方库的同学,最好自行引用它的min版本,而不是通过打包形式。(否则:反而使包变大) 本项目只是为用户提供使用ES6新特性的可能,和简单方便的管理资源。其他扩展功能不在本项目的范围内。

目录简介

  1. 介绍
  2. 程序目录
  3. 项目启动
  4. 使用手册
  5. 常见问题
  6. 更新日志
  7. 最重要的事情

介绍

这个一个以webpack2为基础,启用tree-shaking新技术,为打包支持到低版本的

webpack2
实验性脚手架。 本项目使用
avalon2
作为演示框架。

关于【Webpack】

  1. 服务端使用Express。需要注意的是,只有一个目的那就是提供了
    webpack-dev-middleware
    webpack-hot-middleware
    (代码热替换)。使用自定义的Express程序替换webpack-dev-server,让它更容易实现universal 渲染和为了不使这个包过于庞大。
  2. 针对不同的loader采用了多线程编译,极大的加快了编译速度。
  3. 可用ES6编译低版本IE代码【水有多深不得而知】
  4. 启动新技术tree-shaking
  5. 提供测试框架进行单元测试,代码覆盖率报告,可与Travis-ciCoveralls快速对接。【配置说明
  6. Babel被配置babel-plugin-transform-runtime可以让代码更优化。

关于【HTML】

  1. 支持单页应用和多页应用的混合开发。
  2. 自动引入页面的CSS和JS文件。无需手动设置URL。(所有文件hash的改变都会导致文件名改变,这里的资源引用全由内部自动完成)

关于【CSS】

  1. css的模块化,预处理器的编译。(支持
    sass,scss,less,postcss
  2. 针对低版本浏览器和其他浏览器内核的特殊性,启用autoprefixer自动添加浏览器前缀
  3. 可导入字体和字体图标,操作非常简单。(如阿里系icon)【配置文档
  4. 防缓存的hash规则

关于【JS】

  1. 支持ES5,ES6编写逻辑代码
  2. 由于兼容性问题只可使用AMD规范的
    require
    ,无法使用
    import
    export
  3. 防缓存的hash规则
  4. 快速编译,自动刷新。

程序目录

├── build                    # 所有打包配置项
├── config                   # 项目配置文件
│   ├── webpack              # webpack配置文件夹
│   └── karma.conf.js        # karma配置文件
├── server                   # Express 程序 (使用 webpack 中间件)
│   └── main.js              # 服务端程序入口文件
├── static                   # 静态资源文件夹,将它视为项目根使用
|
├── app                      # 程序源文件
│   ├── html                 # 多页或单页应用的入口HTML
│   └──  source               # 公共的资源文件
│   ├    ├── css
│   ├    ├── js
│   ├    ├── font
│   ├    └── img             
│   ├── utils                # 辅助资源(所有内部文件通过index.js引入,可配置全局变量。)
│   └── view                 # 主路由和异步分割点
│       └── index            # 匹配html文件夹中的index.html。(css,js文件名对应文件夹名,可直接打包无需单独引入)
│           ├── index.js     # 直接与index.html匹配的入口文件,可以作为单页应用的入口,在内部定义自己的项目目录
│           ├── index.css    # 如是多页应用,可设置对应的CSS文件,直接匹配。
│           └── other **     # 页面的其他资源文件,通过index.js引入
└── tests                    # 单元测试

项目启动

环境配置

  • 为了把保证项目正常运行,请自行更新相关环境。
  • 安装node.js
  • 安装git
  • 安装Yarn(可选)

依赖配置

  1. 首先clone项目
    bash
    $ git clone https://github.com/sayll/ie-webpack-start.git
    $ cd ie-webpack-start
    
  2. 由于国内有一堵高墙的存在建议国内用户切换源地址:

    bash
    $ npm run cnpm
    
    以后请使用
    cnpm
    替代
    npm
    操作
  3. 下载依赖

  4. 请确保你的环境配置完成,然后就可以开始以下步骤

    • npm
      用户:
      bash
      $ npm install                   # Install project dependencies
      $ npm start                     # Compile and launch
      
    • cnpm
      用户:
      bash
      $ cnpm install                   # Install project dependencies
      $ npm start                     # Compile and launch
      
    • Yarn
      用户:
      bash
      $ yarn                          # Install project dependencies
      $ yarn start                    # Compile and launch
      
      如果一切顺利,就能正常打开端口:http://localhost:3000/

命令说明

开发过程中,你用得最多的会是

npm start
,但是这里还有很多其它的处理:

|

npm run 
|解释| |------------------|-----------| |
start
|启动3000端口服务,代码热替换开启。| |
build
|单纯打包资源,不会进行代码测试。| |
deploy
|删除旧文件,进行代码测试,打包相关文件(默认目录~/build)。| |
test
|开启Karma测试并生成覆盖率报告。(默认关闭:启动配置)| |
visualizer
|打包资源分析| |
clean
|清除打包的文件| |
cnpm
|替换为淘宝镜像| * 开发使用
start
* 调试IE使用
build
* 发布使用
deploy

使用手册

基本

  1. 创建HTML视图,文件地址:
    app/html
    • 创建单页应用,只需一个入口文件
      index.html
      即可。
  2. 配置JS,CSS资源文件,文件地址:

    app/view

    一. 创建html文件

    app/html/demo.html
    时,配置view中的资源文件:
* `app/view/demo/demo.js`
* `app/view/demo/demo.css`

二. 创建html文件app/html/test/index.html时,配置view中的资源文件:

  • app/view/test/index/index.js
  • app/view/test/index/index.css

三. 创建单页应用app/html/index.html时,配置view中的资源文件:

  • app/view/index/index.js
  • app/view/index/index.css
  • app/view/index中管理其他资源文件,通过唯一的文件入口index.js来引入其他资源文件
  1. 静态资源
    1. 如需直接引用静态资源文件,可在static文件夹中添加文件,将static视为项目根文件。
      • 如引用
        ico
        ,通过
        即可

高级

  1. 使用框架(avalon2)或库(jquery)
    • 首先安装依赖 或 寻找兼容IE版本的库文件
      bash
      $ npm install avalon2
      
  • 配置全局调用变量,地址:
    app/utils/index.js
    js
    // 由于avalon2内部自己解决绑定window对象,所以无需其他处理,直接引入即可。
    window.$ = require('./tools/jquery.min');
    require('avalon2');
    
    注意:引包只能通过
    require
    形式,否则无法正常打包;(兼容低版本IE做出的牺牲之一)
  1. 引用字体图标Icon
  • 构建自己的icon文件

  • 替换文件地址:app/source/font/icon

  • 修改配置文件 文件地址:config/webpack/base/base.js

    • CSS预处理器修改项:
      cssType
      • 使用
        less
        下载依赖
        bash
        $ npm install less-loader less        # npm用户
        $ cnpm install less-loader less       # cnpm用户
        $ yarn add less-loader less           # yarn用户
        
      • 使用
        sass|scss
        下载依赖
        bash
        $ npm install sass-loader node-sass       # npm用户(由于墙的原因会有很大一部分人会失败,推荐使用cnpm)
        $ cnpm install sass-loader node-sass      # cnpm用户
        $ yarn add sass-loader node-sass      # yarn用户
        
      • 样式文件后缀需要与
        cssType
        对应;
        • 如使用
          less
          ,请将
          app
          内部所有的样式文件后缀修改为
          .less
    • CDN修改项:
      cdnPath
    • main.js修改项:
      mainJS

      • 文件地址:app/source/js/main.js
        js
        module.exports = {
        mainJS  : true, // 添加公共main.js
        devHost : '0.0.0.0',
        devPort : '3000',
        viewType: 'html', // pug,jade,html...
        cssType : 'css', // sass,scss,less,pcss,css...
        cdnPath : './', // 资源指向位置,可寄放CDN
        };
        
  1. 修改目录结构
    • 文件地址:
      config/webpack/base/files.js
    • 此文件使webpack正确索引资源文件,如需调整资源目录,请使目录资源与
      files.js
      中的配置一一对应。 具体请查看源码
  2. 单元测试(更多说明)

发布

  1. 打包命令
    bash
    $ npm run build
    
    bash
    $ npm run deploy
    
  2. 二者区别
    • build
      无测试,速度最快,安全系数较低。
    • deploy
      当单元测试功能开启时,
      deploy
      将添加一个检测项。只有所有测试通过时,才能正常打包。速度慢,安全系数最高。(默认关闭,开启请参考:启动配置
  3. 打包文件为
    build
    文件夹,请以此为根目录。

常见问题

常见问题

更新日志

更新详情

最重要的事情

  • 亲不要吝啬自己的Star,右上角Star一下呗。

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.