05月27, 2017

组件打包小记

去年自己写了一个Dui,虽然只是半成品,但也算折腾了一些小东西。当时遗留了一个问题,就是我提供出来的文件,必须在使用者的webpack里面加上babel解析。

默认webpack的jsx loader简单如下:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

由于我代码中包含了import,上面的规则是不对node_modules里面的文件做babel的处理,而我的Dui就是放在node_modules里面的,所以当时的解决方案是改webpack的配置。

现在想来,这个方案并不友好(其实我当时参考的是iView的代码)。那么怎么来实现这个打包呢?

最最简单的方式,参考其他的组件是怎么打包的。翻了一些源码后,终于折腾出来了,以下是简单的webpack配置:

var path = require('path');

module.exports = {
    entry: './src/dui',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'dui.js',
        library: 'Dui',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                exclude: [
                    /\.html$/,
                    /\.(js|jsx)$/,
                    /\.less$/,
                    /\.css$/,
                    /\.json$/,
                    /\.svg$/
                ],
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'static/media/[name].[hash:8].[ext]'
                }
            }
        ]
    },
    externals: {
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom'
        }
    }
};

这里的externals就相当于告诉webpack不需要把里面的配置项(上面针对react项目)打包进去。当然在我写的Dui里面并没有用到react,但有用到其他npm包,处理的思路是一样的。

这边我同事也提供了另外一种思路,即不打包只编译,采用gulp插件:

var gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('copy', function() {
    return gulp
    .src('src/**')
    .pipe(gulp.dest('dist'));
});

gulp.task('babel', ['copy'], function() {
    gulp
    .src('dist/**/*.js')
    .pipe(babel({
        presets: ['es2015', 'react'],
    }))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['babel']);

但据同事的反馈,这种会有些问题,比如说,class中写了一个static,babel解析会有问题。(当然,这也许和.babelrc有关系,具体还得排查一下)。

组件测试

一般像我之前测试是会先npm publish,其实这种方案真的很傻。

npm install <package>

这个package支持本地目录,即可以通过相对路径或者绝对路径来安装写好的组件。

总结

多尝试,多翻别人的源码,总会有一些收获!

本文链接:www.my-fe.pub/post/about-component-pack.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。