V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
happyjohann
V2EX  ›  JavaScript

同一 index.html 线上线下自动引入不同版本 css 和 js。

  •  
  •   happyjohann · 2017-01-13 07:31:44 +08:00 · 6327 次点击
    这是一个创建于 2853 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Problem Description

    第 1 条附言  ·  2017-01-13 22:24:47 +08:00

    Summary about responses:

    .htaccess on local machine

    vim /etc/apache2/httpd.conf
    
    RewriteEngine on
    
    RewriteRule ^(.*presentations/)(assets/)(.*)$ $1~$2$3 [L,QSA,NC]
    
    sudo /usr/sbin/apachectl restart
    

    And that works great for me.

    Local Machine Dependent.

    Other Options

    Webpack

    with replace add-on

    if clause

    if (module.hot) {
    // dev code
    }
    

    with two env

    It should be one good practice. However, personally speaking, I have no enough knowledge about this methods. [TODO:]

    Gulp with two build tasks

    It should also be one good practice. However, personally speaking, I have no enough knowledge about this methods. [TODO:]

    symbolic link from script.js to ~script.js on VPS

    Server Dependent

    Nginx sub_filter rewrite on VPS

    location / {
      sub_filter '/presentations/assets/' '/presentations/~assets/';
      sub_filter_once off;
    }
    

    Or more advanced configuration employing regex match and replace, see https://www.nginx.com/resources/wiki/modules/substitutions/ for nginx_substitutions_filter.

    Server Dependent.

    Front-end JS window.location.host Based Loading

    Domain Dependent.

    So called load.js method (?)

    I guess it is the same as above window.location.host based method.

    Domain Dependent

    If this detect the existence of /~assets/ first and if not then load /assets/, the could be the perfect solution.

    However, no idea how to implement this.

    Switch hosts

    I understand this as two absolutely different sites, not sharing the same index.html

    Local Machine Dependent

    Summary about responses and further handling can also be accessed via this link: Including Different css and js Files for Development and Deployment Environment by the Same index.html without Error.

    37 条回复    2017-01-30 04:44:05 +08:00
    ericls
        1
    ericls  
       2017-01-13 07:50:00 +08:00
    通过环境变量配合 webpack 的 replace 插件
    fucker
        2
    fucker  
       2017-01-13 09:06:02 +08:00
    我有办法
    spritevan
        3
    spritevan  
       2017-01-13 09:19:25 +08:00
    if (module.hot) {
    // dev code
    }
    justyy
        4
    justyy  
       2017-01-13 09:22:57 +08:00
    楼主 字写得很漂亮
    lwbjing
        5
    lwbjing  
       2017-01-13 09:32:35 +08:00
    naomhan
        6
    naomhan  
       2017-01-13 09:39:06 +08:00
    感觉最简单的就是 switchhosts 了 代码都不要改 线上内网各布一套
    ragnaroks
        7
    ragnaroks  
       2017-01-13 10:41:28 +08:00
    index 硬是看成了 mdx,
    纯前端的情况下,可能得依靠一个 load.js 来做判断了
    learnshare
        8
    learnshare  
       2017-01-13 11:09:23 +08:00
    Gulp 写两个编译任务
    airyland
        9
    airyland  
       2017-01-13 12:36:44 +08:00
    需求不复杂,用 webpack 可破,两个 env 不同配置即可,开发时 dev 配置一套,要上线构建时另一套。
    happyjohann
        10
    happyjohann  
    OP
       2017-01-13 14:24:48 +08:00 via iPhone
    @ericls 能给个教程链接不?我对前端开发工具还不熟悉。
    happyjohann
        11
    happyjohann  
    OP
       2017-01-13 14:26:24 +08:00 via iPhone
    @spritevan 这个是用在什么环境下的,纯前端应该没办法直接用未定义的 module 吧,能解释一下么?
    happyjohann
        12
    happyjohann  
    OP
       2017-01-13 14:26:56 +08:00 via iPhone
    @justyy 这并不是重点,想法来了,所以就胡乱写了
    happyjohann
        13
    happyjohann  
    OP
       2017-01-13 14:27:58 +08:00 via iPhone
    @ragnaroks load.js 具体内容如何写,能赐教不?谢谢
    happyjohann
        14
    happyjohann  
    OP
       2017-01-13 14:28:41 +08:00 via iPhone
    @learnshare 有参考教程不?谢谢
    happyjohann
        15
    happyjohann  
    OP
       2017-01-13 14:29:50 +08:00 via iPhone
    @airyland 能给个参考教程不?对这个工具还不熟。谢谢
    ragnaroks
        16
    ragnaroks  
       2017-01-13 14:40:19 +08:00
    假设你线下是 localhost,那 host 就会是 http://localhost/xxxx,线上是 http://domain.com/xxx
    直接判断一下就在 js 里面加载不同的资源
    spritevan
        17
    spritevan  
       2017-01-13 14:43:50 +08:00
    @happyjohann module.hot 是和 @airyland 一样依靠 webpack
    差异在于他通过不同的配置文件来配置构建流程
    module.hot 是用来判断是否开启热更新的状态,通常等价于测试环境 ;-)

    原理很简单,也可以通过声明其他环境变量(比如检测域名)来标识开发/生产环境
    jarlyyn
        18
    jarlyyn  
       2017-01-13 14:47:02 +08:00
    nginx 做个 sub_filter 就能搞定的事情。

    怎么这么复杂了。
    happyjohann
        19
    happyjohann  
    OP
       2017-01-13 14:58:23 +08:00 via iPhone
    @ragnaroks 我本地用的是 project.static.domain 类似的 URL ,不想写成 URL based , case based 代码。谢谢建议啊😄
    happyjohann
        20
    happyjohann  
    OP
       2017-01-13 15:00:54 +08:00 via iPhone
    @spritevan 嗯,和通过 module 判断是前端还是 node 的通用库一样。谢谢。看来又要学新东西了, webpack 之前只听说没用过
    happyjohann
        21
    happyjohann  
    OP
       2017-01-13 15:01:56 +08:00 via iPhone
    @jarlyyn 你这个方案我比较喜欢啊。能告知一下 fileter 具体怎么写么?谢谢
    jarlyyn
        22
    jarlyyn  
       2017-01-13 15:03:06 +08:00
    前端挂个 nginx 反代

    加一行

    location /
    {
    sub_filter '/skin/production' '/skin/development;
    sub_filter_once off;
    }

    不久好了么。
    happyjohann
        23
    happyjohann  
    OP
       2017-01-13 15:04:09 +08:00 via iPhone
    @fucker 愿闻其详
    happyjohann
        24
    happyjohann  
    OP
       2017-01-13 15:07:59 +08:00 via iPhone
    @jarlyyn 不错,谢谢。 sub_filter 是字串替换吗?我在想用正则去掉如例子所示的~😄
    jarlyyn
        25
    jarlyyn  
       2017-01-13 15:12:47 +08:00
    @happyjohann

    你把开发和生产的直接分两个目录不久好了……

    sub_filter 是字符串替换

    要正则的话就要用到

    nginx_substitutions_filter 这个库了

    https://www.nginx.com/resources/wiki/modules/substitutions/
    learnshare
        26
    learnshare  
       2017-01-13 15:14:45 +08:00
    happyjohann
        27
    happyjohann  
    OP
       2017-01-13 15:49:47 +08:00 via iPhone
    @jarlyyn 其实是在构建自己的最佳实践框架,放不同目录的问题是修改代码的时候需要切换文件夹。不过谢谢建议,准备采用两文件夹结构了,毕竟看起来更清爽。
    happyjohann
        28
    happyjohann  
    OP
       2017-01-13 15:54:25 +08:00 via iPhone
    @learnshare 这个 Google 链接就和我自己找一样了。对 gulp 不熟悉所以重点是不知道两个编译任务相关如何构建,甚至都不知道合适关键词,也不具备搜索结果筛选能力😭
    jarlyyn
        29
    jarlyyn  
       2017-01-13 16:00:34 +08:00
    @happyjohann

    这是最简单的方法啊。

    还有个直接的方法就是把 config.js 做一个 alias

    指向 config.js 指向 config.develop.js

    相关的配置文件放里面
    happyjohann
        30
    happyjohann  
    OP
       2017-01-13 16:29:50 +08:00 via iPhone
    @jarlyyn 哈哈哈,看来你的配置方法用的比较灵活啊。不过问题是不太具备可移植性。只能在你的机器(服务器或者本地机器),别人的机器没有配置同样的 nginx 配置或者 symbolic link 就搞不定了啊
    shengchao
        31
    shengchao  
       2017-01-13 17:56:45 +08:00
    提供一个方案, js 判断 window.location.host 是什么,动态给 index.html 插入 css 和 js 标签。
    deleted
        32
    deleted  
       2017-01-13 17:58:59 +08:00 via Android
    模板里写个 if 可行?
    happyjohann
        33
    happyjohann  
    OP
       2017-01-13 18:58:37 +08:00 via iPhone
    @deleted 有思路怎么写吗?
    happyjohann
        34
    happyjohann  
    OP
       2017-01-13 21:57:41 +08:00
    My own solution:

    Since Apache is shipped with macOS, so personally I use Apache for development and Nginx for production.

    And my apache configuration (the psudo-one since i am using this rule for just one subfolder) is as following:

    ```apache
    RewriteEngine on

    RewriteRule ^(.*)(assets/)(.*)$ $1~$2$3 [L,QSA,NC]
    ```

    Sorry for English, currently Chinese input is broken.
    deleted
        35
    deleted  
       2017-01-14 02:21:01 +08:00 via Android
    @happyjohann 秀英语
    happyjohann
        36
    happyjohann  
    OP
       2017-01-14 03:52:08 +08:00
    @deleted 人不在国内呀,用学校的电脑是没有中文输入法的
    cctrv
        37
    cctrv  
       2017-01-30 04:44:05 +08:00 via iPhone
    .htcaccess 是一個方案。
    開發機配置 hosts 也是一個方案。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2922 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:57 · PVG 22:57 · LAX 06:57 · JFK 09:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.