These are chat archives for QingWei-Li/cooking

15th
Jun 2016
BITDM
@BITDM
Jun 15 2016 01:04
vue的项目,用cooking建立的,如果要加入vuex,vue-router这些插件,应该在哪做比较好?直接在项目中npm install?
另外,之前用vue-cli建的项目,eslint用的是standard,换成cooking之后一堆的错误,可以直接用以前的eslint配置吗?
cinwell.li
@QingWei-Li
Jun 15 2016 01:32
@BITDM 直接项目里安装 vue vuex vue-router , cooking 只去处理开发依赖,这些依赖不算在内。因为 cooking 提供的 eslint 插件并没有提供 eslint-standard 的配置,需要你本地自己安装
@BITDM 本地安装 eslint-config-standard 及其相关插件(我记得 standard 还需要你安装什么 plugin ,忘记了)
ISCLOUDX
@ISCLOUDX
Jun 15 2016 02:40
请问 build 之后的一大堆 js 怎么才能把它们放到指定的一个子目录里面呢
@QingWei-Li
cinwell.li
@QingWei-Li
Jun 15 2016 02:40
配置 dist 没
ISCLOUDX
@ISCLOUDX
Jun 15 2016 02:41
配置了的
dist: './dist',
cinwell.li
@QingWei-Li
Jun 15 2016 02:41
那么应该是输出到你的 dist 指定的目录下
ISCLOUDX
@ISCLOUDX
Jun 15 2016 02:42
我想的是 dist 下面包含 resource asset index.html 3个文件 resource 里面是所有的 js
cinwell.li
@QingWei-Li
Jun 15 2016 02:42
ISCLOUDX
@ISCLOUDX
Jun 15 2016 02:42
能不能实现呢
cinwell.li
@QingWei-Li
Jun 15 2016 02:42
可以
那就要改 filename 了
或者可以另一种方式 我先试试
ISCLOUDX
@ISCLOUDX
Jun 15 2016 02:43
恩 好谢谢 因为 vue 那个代码切分以后 文件太多了
cinwell.li
@QingWei-Li
Jun 15 2016 02:45
  dist: './dist/resource',
  template: [
    {
      template: './index.tpl’,
      filename: '../index.html'
    }
  ],
也就是把 dist 改成 ./dist/resource 然后 html 模板输出到相对于 dist 的上一级
ISCLOUDX
@ISCLOUDX
Jun 15 2016 02:45
我试试看
这样也可以的呀
cinwell.li
@QingWei-Li
Jun 15 2016 02:45
貌似 vue-cli 创建的模板就是这样搞的
钟永豪
@zhy6421867
Jun 15 2016 02:55
react的手脚架可以自己加入redux吧?
cinwell.li
@QingWei-Li
Jun 15 2016 02:55
可以
cooking 只是处理开发依赖
其他的不管
钟永豪
@zhy6421867
Jun 15 2016 02:55
想不到你还会在线~~
公司有个H5版本的项目,我想用react来开发.现在一点头绪都没有
cinwell.li
@QingWei-Li
Jun 15 2016 02:56
🌚
是指哪一块没头绪
钟永豪
@zhy6421867
Jun 15 2016 02:59
fetch是不是负责AJAX这一块的?
cinwell.li
@QingWei-Li
Jun 15 2016 02:59
钟永豪
@zhy6421867
Jun 15 2016 03:00
components文件夹是不是放组件的地方?
cinwell.li
@QingWei-Li
Jun 15 2016 03:00
是的
钟永豪
@zhy6421867
Jun 15 2016 03:01
你们想的真周全啊
饿了么还招扫地的前端工程师么? =,=
cinwell.li
@QingWei-Li
Jun 15 2016 03:03
其实我没写过 react 我是按照 vue 做的 🌚
来来来
哈哈
钟永豪
@zhy6421867
Jun 15 2016 03:03
你们要求高不高
我先用react写完这个项目再说吧
vue感觉有点扯淡,简化了很多angular的功能,把AJAX也搞没了
ISCLOUDX
@ISCLOUDX
Jun 15 2016 03:04
ajax 可以用 vue-resource 来搞嘛
cinwell.li
@QingWei-Li
Jun 15 2016 03:05
是啊
vue 用起来很爽的
钟永豪
@zhy6421867
Jun 15 2016 03:06
还好我有个同事会react,不懂都可以问他
vue有中文文档,好很多
BITDM
@BITDM
Jun 15 2016 05:26
@QingWei-Li 安装了eslint-config-standard和一堆东西以后,把以前项目的文件拷进去,发现出现这样的错误提示:http://eslint.org/docs/rules/no-useless-computed-key Definition for rule 'no-useless-computed-key' was not found
这是什么情况?
cinwell.li
@QingWei-Li
Jun 15 2016 05:38
@BITDM 那个就是你代码风格的问题了
你照着 eslint 给的提示改代码就好了
BITDM
@BITDM
Jun 15 2016 05:39
这些代码在之前的eslint下没有提示出错
而且提示出错的地方很奇怪,比如:import Vue from 'vue' 在import下面有个小箭头
cinwell.li
@QingWei-Li
Jun 15 2016 05:42
你之前用的 eslint 版本几?
你本地项目里的 eslint 有清理掉么 还有全局有安装 eslint 么
BITDM
@BITDM
Jun 15 2016 05:42
用vue-cli初始化的项目,用的standard
cinwell.li
@QingWei-Li
Jun 15 2016 05:43
嗯 那么现在的 node_modules 里还有 eslint 把?
BITDM
@BITDM
Jun 15 2016 05:44
新项目是用cooking初始化的,准备把之前的代码合并进来
然后因为要装eslint-config-standard,装了一堆eslint相关的包
把eslint也安装在node_modules
下面了
cinwell.li
@QingWei-Li
Jun 15 2016 05:46
哦 把eslint 删掉
卸掉
BITDM
@BITDM
Jun 15 2016 05:47
卸掉以后,会有个警告:eslint-config-standard@5.3.1 requires a peer of eslint@^2.0.0-rc.0 but none was installed.
这个不影响吧?
cinwell.li
@QingWei-Li
Jun 15 2016 05:47
不影响
其实本地安装了 eslint 也应该是可以的 我研究下是什么情况
BITDM
@BITDM
Jun 15 2016 05:49
卸载了还是有这个错误提示
cinwell.li
@QingWei-Li
Jun 15 2016 05:49
。。。
额 你把现在的目录结构截图我看看
BITDM
@BITDM
Jun 15 2016 05:50
有没有别的方法不用额外安装eslint-config-*,直接在现有的上面改?
cinwell.li
@QingWei-Li
Jun 15 2016 05:50
还有 cooking 的配置
BITDM
@BITDM
Jun 15 2016 05:51
node_modules下面的也要?
cinwell.li
@QingWei-Li
Jun 15 2016 05:51
不用
BITDM
@BITDM
Jun 15 2016 05:53
blob
ISCLOUDX
@ISCLOUDX
Jun 15 2016 05:53
@QingWei-Li 我发现之前的javascript dist: './dist/resource', template: [ { template: './index.tpl’, filename: '../index.html' } ],这个代码会出现一些资源无法定位到
BITDM
@BITDM
Jun 15 2016 05:54
blob
cinwell.li
@QingWei-Li
Jun 15 2016 05:55
eslintrc 和 eslintrc.js
重复了
BITDM
@BITDM
Jun 15 2016 05:55
.eslintrc里改了:{
"plugins": ["vue"],
"extends": ["standard"]
}
cinwell.li
@QingWei-Li
Jun 15 2016 05:55
不知道它用了那个
eslintrc 和 eslintrc.js 作用是一样的 去掉一个
@ISCLOUDX 哪些资源?检查下资源路径对不对
ISCLOUDX
@ISCLOUDX
Jun 15 2016 05:56
var path = require('path');
var cooking = require('cooking');
cooking.set({
    entry: {
        app: './src/main.js',
        vendor: ['vue']
    },
    dist: './dist',
    template: './src/index.tpl',
    devServer: {
        enable: true,
        hot: true,
        assetsPath: 'asset',
        extractCSS: false,
        host:"192.168.1.245",
        log: false,
        port: 8080,
        hostname: 'localhost',
        protocol: 'http:',
        historyApiFallback: true,
        stats: '',
        noInfo: false,
        quiet: false,
        lazy: false
    },
    clean: true,
    hash: true,
    sourceMap: true,
    chunk: 'vendor',
    publicPath: './',
    assetsPath: 'asset',
    urlLoaderLimit: 10000,
    extractCSS: '[name].[contenthash:4].css',
    extends: ['vue','postcss']
});

cooking.add('resolve.alias', {
    'src': path.resolve(__dirname, './src')
});
cooking.add('loader.swf',{ test: /\.swf$/,
    loader: "file?name=[path][name].[ext]"
});
cooking.add('loader.xml',{ test: /\.xml$/,
    loader: "file?name=[path][name].[ext]"
});


module.exports = cooking.resolve();
现在配置项是这样的
页面正常
BITDM
@BITDM
Jun 15 2016 05:57
@QingWei-Li 去掉.eslintrc.js以后,还是和以前一样的报错
cinwell.li
@QingWei-Li
Jun 15 2016 05:57
报错发一下
BITDM
@BITDM
Jun 15 2016 05:59
blob
下面还有一堆,基本上都是在import 和 export的位置报错
cinwell.li
@QingWei-Li
Jun 15 2016 06:00
嗯 我研究下
BITDM
@BITDM
Jun 15 2016 06:01
看提示好象是某个规则没有定义
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:01
   dist: './dist/resource',
    template: [
        {
            template: './src/index.tpl',
            filename: '../index.html'
        }
    ]
我把配置改成这样以后
<script type="text/javascript" src="./vendor.ba21357.js"></script><script type="text/javascript" src="./app.9fe7062.js"></script></body>
index.html 实际载入这个位置了
cinwell.li
@QingWei-Li
Jun 15 2016 06:01
你要配 publicPath
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:02
blob
cinwell.li
@QingWei-Li
Jun 15 2016 06:02
还有昨天升级了一下 cooking 修复了 publicPath 配置后不起作用的 bug
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:03
已经升级了
现在是 publicPath: './',
应该改成 ./resource 吗
cinwell.li
@QingWei-Li
Jun 15 2016 06:03
不过 publicPath最好配置成绝对路径
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:07
其他很正常了
字体不对
哦 知道了 相对路径的问题
cinwell.li
@QingWei-Li
Jun 15 2016 06:10
@ISCLOUDX cooking 提供的 eslint 版本太老了。。
奇怪本地安装 eslint 居然没起效果。。
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:10
这怎么升级
cinwell.li
@QingWei-Li
Jun 15 2016 06:10
需要我这边操作 不过你可以这样做
你是 mac 么
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:11
恩 是 mac
cinwell.li
@QingWei-Li
Jun 15 2016 06:11
到 ~/.cooking 下
npm uninstall eslint
然后再 npm i eslint
把 eslint 升级到 2.10 以上就好了
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:12
2.12了
cinwell.li
@QingWei-Li
Jun 15 2016 06:12
好了我这边也升级了 可以通过 cooking update lint 升级,但是你已经弄了就不用升级了
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:15
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:28
template: [
        {
            template: './src/index.tpl',
            filename: '../index.html'
        }
    ],
这样写的话 我 watch 打开是 cannot get /
template: [
{
template: './src/index.tpl',
filename: './index.html'
}
],
钟永豪
@zhy6421867
Jun 15 2016 06:28
cooking-sass引进来了,怎么配置,怎么用?
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:28
devServer不能配置template吗
cinwell.li
@QingWei-Li
Jun 15 2016 06:29
。。。啥意思
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:29
template: [
{
template: './src/index.tpl',
filename: './index.html'
}
],
能watch
cinwell.li
@QingWei-Li
Jun 15 2016 06:29
extends: ['sass']
@zhy6421867 extends 加一个 sass
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:30
dist: './dist/resource/',
    template: [
        {
            template: './src/index.tpl',
            filename: '../index.html'
        }
    ],
    devServer: {
        enable: true,
        hot: true,
        assetsPath: 'asset',
        extractCSS: false,
        log: false,
        port: 8080,
        hostname: 'localhost',
        protocol: 'http:',
        historyApiFallback: true,
        stats: '',
        noInfo: false,
        quiet: false,
        lazy: false,
        template: [
            {
                template: './src/index.tpl',
                filename: './index.html'
            }
        ]
    }
这样是不是DevServer 是无效的
cinwell.li
@QingWei-Li
Jun 15 2016 06:30
@ISCLOUDX 你是指 development 和 production 用两套 template ?
没这个字段
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:30
cinwell.li
@QingWei-Li
Jun 15 2016 06:31
如果这样的话 你需要判断 NODE_ENV 来选择使用那个 template
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:31
 template: [
        {
            template: './src/index.tpl',
            filename: '../index.html'
        }
    ],
我用这个配置打包是 ok 的
但是 cooking watch 使用这样配置打不开页面了
cinwell.li
@QingWei-Li
Jun 15 2016 06:31
哦 对。。。
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:32
是不是现在只能在打包之前修改这个配置来操作呀
cinwell.li
@QingWei-Li
Jun 15 2016 06:32
额 好吧 vue 的模板是有两个配置文件
那你这样
template: process.env.NODE_ENV === 'production' ? '../index.tpl' : './index.tpl’
  template: {
    template: './xxx.tpl',
    filename: process.env.NODE_ENV === 'production' ? '../index.html' : './index.html'
  }
通过 process.env.NODE_ENV 判断当前运行环境
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:34
还能这么晚
这么玩
cinwell.li
@QingWei-Li
Jun 15 2016 06:34
是啊 🌚
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:35
😄
cinwell.li
@QingWei-Li
Jun 15 2016 06:35
亦或者 你写两个配置文件也可以
因为 cooking watch 和 cooking build 是可以指定配置文件的
cooking watch -c cooking.dev.js 和 cooking build -c cooking.prod.js
方法很多
ISCLOUDX
@ISCLOUDX
Jun 15 2016 06:36
哦哦
好 谢谢你
BITDM
@BITDM
Jun 15 2016 07:08
要引用components下的vue文件,是不是可以先把components目录在cooking.conf.js里直接加一个resolve?
cinwell.li
@QingWei-Li
Jun 15 2016 07:08
en
BITDM
@BITDM
Jun 15 2016 07:08
之后引用的时候直接这么写:import Component from 'components/component'?
cinwell.li
@QingWei-Li
Jun 15 2016 07:08
是的
cooking.add('resolve.alias', {
  components: path.join(__dirname, 'src/components')
});
BITDM
@BITDM
Jun 15 2016 07:20
好的,谢谢
一波不是一波
@riskers
Jun 15 2016 12:25
create 好慢啊
cinwell.li
@QingWei-Li
Jun 15 2016 13:12
下载慢?
This message was deleted
This message was deleted
@riskers 可以切换 npm 镜像
cooking config registry https://registry.npm.taobao.org
一波不是一波
@riskers
Jun 15 2016 14:35
I`XAMN_P4H65M94`9]0MSP7.png
这是什么意思啊
cinwell.li
@QingWei-Li
Jun 15 2016 14:36
NPM 版本不对吧?
@riskers 需要 NPM 3 以上
一波不是一波
@riskers
Jun 15 2016 14:41
我试试
一波不是一波
@riskers
Jun 15 2016 14:47
升级到 npm3 还是不行
能是什么原因呢
cinwell.li
@QingWei-Li
Jun 15 2016 14:53
升级到 NPM 3 后要重新安装 cooking
并且把用户目录下的 .cooking 删掉
我记得我有在 package.json 里配置 Node 和 NPM 的最低版本限制的 😂
居然没生效 😂
一波不是一波
@riskers
Jun 15 2016 17:05
还有一个问题,vue项目 怎么在 vue文件中使用 less 呢?