egg如何配置可以编译ES6语法

[spiroo]

请问egg如何配置可以编译ES6语法及less/sass预编译工具

[popomore]

egg 使用 node6，不需要编译。

[atian25]

less 这些预编译属于前端范畴，跟 egg 关系不大，你可以自己启动 webpack 去 watch 并编译前端代码。

后端代码无需编译，也不建议编译。

webpack 和 egg 的结合那里，唯一的用处就是在 agent 里面启动一个 webpack 的 static server 来做静态资源的引用，这个我们内部有一些实践，但还没有最佳实践可以开源出来。

[alex-zhang]

egg 如何支持 es6 的 import export

[xjchenhao]

启动一个 webpack 的 static server 来做静态资源的引用

这个插件近期会开源出来吗。感觉egg的周边生态还是有点弱啊。有点伤😅
@atian25

[okoala]

@xjchenhao 可以看看我这个，集成 neutrino。不过还不是最佳实践~
https://github.com/okoala/egg-neutrino

[xjchenhao]

我配置了webpackHotMiddleware，问题解决了。就是实现起来不科学，需要你们框架提供一下支持。先贴代码。

//app.js
let webpack = require('webpack');
let webpackDevMiddleware = require('koa-webpack-dev-middleware');
let webpackHotMiddleware = require('koa-webpack-hot-middleware');
let devConfig = require('./config/webpack.config.js');

module.exports = app => {
    if(app.config.env=='local'){
        let compiler = webpack(devConfig);

        app.use(webpackDevMiddleware(compiler, {
            noInfo: true,
            publicPath: devConfig.output.publicPath
        }));
        app.use(webpackHotMiddleware(compiler));
    }
};

//package.json
  "devDependencies": {
    "babel-loader": "^7.0.0",
    "css-loader": "^0.28.1",
    "koa-webpack-dev-middleware": "^1.4.5",
    "koa-webpack-hot-middleware": "^1.0.3",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1"
  },

//config/webpack.config.js
var path = require('path'),
    webpack = require('webpack'),
    glob = require('glob'),
    ExtractTextPlugin = require("extract-text-webpack-plugin"),
    commander = require('commander');

// 生成入口文件的map
var entryObj = glob.sync(path.join(__dirname, '../app/public/script/page/**/**.js')),
    entryReg = /(.*\/page\/)(.*)\.js/i,
    formatEntry = {},
    hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';

entryObj.forEach(function (val) {
    if (entryReg.test(val)) {

        formatEntry[RegExp.$2] = [val];

        //     formatEntry[RegExp.$2].push(hotMiddlewareScript);
    }
});

console.log(path.join(__dirname, "../app/public/libs/jquery/dist/jquery.min.js"))

module.exports = {
    //页面入口文件配置
    //entry: formatEntry,
    entry: Object.assign(formatEntry, {
        common: ['jquery']
    }),

    //入口文件输出配置
    output: {
        path: path.join(__dirname, '../app/public/script/pkg'),
        filename: '[name].js',
        publicPath: '/script/pkg'
    },
    module: {
        //加载器配置
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {test: /\.(jpe?g|gif|png)$/, loader: 'url-loader?limit=100000'},
            {
                test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
                loader: 'url?prefix=font/&limit=10000'
            },
            {
                // use vue-loader for *.vue files
                test: /\.vue$/,
                loader: 'vue'
            },
            // {test: require.resolve(path.join(__dirname, '../app/public/libs/jquery/dist/jquery.min.js')), loader: 'expose?jQuery'},
            {
                test: /\.js$/,
                loader: 'babel-loader'
            }
        ]
    },
    //插件项
    plugins: [
        new webpack.ProvidePlugin({
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery"
        }),
        new ExtractTextPlugin("styles.css"),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module, count) {
                // any required modules inside node_modules are extracted to vendor
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0
                )
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor.min',
            chunks: ['vendor','common']
        }),
        //外部模块分隔
        new webpack.DefinePlugin({
            "require.specified": "require.resolve"
        })
    ],
    //其它解决方案配置
    resolve: {
        modules: [
            path.join(__dirname, "../app/public/libs/")
        ],
        extensions: ['.js', '.json'],
        alias: {
            module: path.join(__dirname, '../app/public/script/module/'),
            page: path.join(__dirname, '../app/public/script/page/'),
            libs: path.join(__dirname, '../static/libs/'),

            jquery: path.join(__dirname, "../app/public/libs/jquery/dist/jquery.js")
        }
    }
};

你们也看到了，app.js上用app.config.env判断环境。能否像中间件的config配置的那种机制提供接口。
@okoala @atian25

[xjchenhao]

我尝试过在中间件中增加相关代码，但是貌似每次请求文件都会编译一次webpack。且大概率出现下面截图的报错。

核心的webpack配置文件跟上面代码是一样的。

下面是中间件的代码配置。

//config/config.local.js
'use strict';

module.exports = appInfo => {
    const config = {};

    config.middleware=[ 'webpack' ];

    return config;
};

//middleware/webpack.js
var webpack = require('webpack');
var webpackDevMiddleware = require('koa-webpack-dev-middleware');
var webpackHotMiddleware = require('koa-webpack-hot-middleware');
let devConfig = require('./../../config/webpack.config.js');

let compiler = webpack(devConfig);
module.exports = options => {
    return function* webpack(next) {
        yield next;

        this.app.use(webpackDevMiddleware(compiler, {
            noInfo: true,
            publicPath: devConfig.output.publicPath
        }));
        this.app.use(webpackHotMiddleware(compiler));
    };
};

[xjchenhao]

写了一个插件，完成了这个需求，就几行代码。egg-webpack-middleware。第一次写egg插件，开心😄🎉

//config.local.js
'use strict';

let devConfig = require('./../config/webpack.config');

module.exports = appInfo => {
    const config = {};

    config.webpackMiddleware = devConfig;

    return config;
};

还是希望不通过插件实现这个功能，给app.js也做个app.local.js、app.prod.js这样的配置覆盖。

@atian25

[atian25]

@xjchenhao app.js 并不是配置，而且这类的功能，肯定是通过插件的方式实现的，因为不是所有的项目都会用到 webpack。 egg 是 微内核 + 插件 的架构，除非 webpack 未来统一天下，否则这类插件不可能会内置到 egg，你可以在你的上层框架那里封装内置。

[lerry]

同问egg 如何配置支持 es6 的 import export
我是看了你们这篇文章来的
http://taobaofed.org/blog/2016/01/07/find-back-the-lost-es6-features-in-nodejs/

但是项目是用 egg-bin 启动的，不知道怎么改

[369857519]

同问，这个问题非常更尴尬。egg 如何配置支持 es6 的 import export

[lerry]

@369857519 我现在已经不纠结这个了, service 可以直接访问到，基本没有import的需求了

[hezhongfeng]

@lerry 但是真的有一些模块是需要引入的，不是所有的东西都在service中
8.11.1仍然不行

[atian25]

@hezhongfeng 通过 loader 来加载即可。

[atian25]

@369857519 import 还是不成熟的特性，没必要用。

[IEfucker]

我参照Babel稳定配置了以下，跑起来报了这个

Class constructor BaseContextClass cannot be invoked without 'new'

registry https://github.com/IEfucker/q-egg/tree/babel

[koibi2]

先 cnpm install babel-register -D。再照这个配置来：
https://github.com/eggjs/egg/issues/1489#issuecomment-334625675
就可以使用 import了。