• 配置react+webpack+es6中的一些教训


    1.要用es6,因为目前浏览器的支持情况,那么肯定需要插件将e6的代码转换成es5,我用的是babel-loader,事实证明使用6.x版本似乎是不行的,我换成5.3.2之后就成功了。

    2.webpack.config.js配置文件中,配置loader的时候,我从网上博客中copy的

    loader: 'babel-loader!jsx-loader?harmony' 不知道是语法错误还是本身不通,编译时会报错
    改成仅用babel-loader 错误解决

    2017/02/16更新: 

    一.最近又重新装了一次webpack2.0,发现webpack2有些地方作了修改 

    1.webpack.config.js中loader需要写全名,如:
    {
        test: /.json$/,
        loader: "json-loader"
    }

    2.不再允许插件自定义属性直接写在外层对象中,如postcss属性,需要将插件自定义属性放在plugins属性内:

    plugins:[
            new webpack.LoaderOptionsPlugin({
                options:{
                    postcss:autoprefixer
                }
            })
        ]

    二.另外,安装sass-loader和node-sass的时候遇到了问题

      新的sass-loader需要4.0.0版本以上的node-sass,但是我使用npm install node-sass 老是报一个"1% is not a valid win32 application"的错误,按照stack overflow上说的

      npm rm node-sass+npm install node-sass

      依然不行。改成npm install node-sass@4.0.0还是不行

      后来通过

      npm rm node-sass

      cnpm install node-sass@4.0.0

      安装成功,不知道什么原因。

    三.使用async函数的时候,发现babel并不支持对async的转换。有两种方法,第一种是安装体积较大的polyfill。

       我选择了第二种,安装"babel-plugin-transform-runtime"

         npm install babel-plugin-transform-runtime --save-dev

      然后还需要在webpack.config.js配置,在query中增加一项:

    1 {
    2     test: /.jsx?$/,
    3     exclude: /node_modules/,
    4     loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
    5     query: {
    6         presets: ['react', 'es2015','stage-1'],
    7         plugins: ['transform-runtime']
    8     }
    9 },

      这样,async函数就可以使用了。

    四.babel升级后不再支持decorator装饰器写法。需要安装

    babel-plugin-transform-decorators-legacy

    然后再在 webpack.config.js中对js和jsx的配置的query中增加:
    plugins: ["transform-decorators-legacy"]
    
    
  • 相关阅读:
    influxdb时序数据库之随想其他列式存储数据库
    ss 命令参数 redis-benchmark 以及POSTMAN, CURL分析网络
    HTTP2.0
    我的2020工作总结
    2021-03-31 JDK8 字符串常量池
    try catch与spring的事务回滚
    Spring主动触发事务回滚
    Redis五种数据类型及应用场景
    java面试题
    ubuntu linux mysql 安装 基本操作 命令
  • 原文地址:https://www.cnblogs.com/toulon/p/5607159.html
Copyright © 2020-2023  润新知