webpack4.16.3 使用Babel 对 Decorator 转码，发生的一系列故事

开始的开始，是学习ECMAScript Decorator函数，发现，直接在浏览器是不能运行的。怎么办？ 使用Babel Babel对Decorator进行转码呗。

方案1：Babel官网 https://babeljs.io/repl/

使用方案1，发现每次使用Decorator函数 都要复制到Babel转码测试，实在是太麻烦

方案2 webpack + Babel

1：webpack基础环境搭建

//创建文件夹
mkdir decorator--demo
//进入文件夹
cd decorator--demo
//生成package.json文件
npm init -y
//安装webpack webpack-cli 
npm install webpack webpack-cli --save-dev

在根目录下面创建src文件夹 然后创建index.js 和 print.js 文件

index.js

@testable
class MyTestableClass {
  // ...
}
function testable(target) {
  target.isTestable = true;
}
MyTestableClass.isTestable // true
console.log('index.js')

根目录下新建 webpack.config.js

const path = require('path');
module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

在根目录下面新建.babelrc

{
  "plugins": ["transform-decorators-legacy"]
}

安装Babel

 npm install babel babel-core babel-loader babel-plugin-transform-decorators-legacy core-decorators --save-dev

修改package.json 文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },

运行文件

npm run build

———- 以上可以实现Decorator 转码 ————-

but 我还想文件进行实时编译

为了生成html页面 引入html-webpack-plugin

npm install --save-dev html-webpack-plugin

修改webpack.config.js

+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+     plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],

修改package.js 文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
   + "watch": "webpack --watch --progress"
  },

执行命名

npm run watch

实现热更新

安装 webpack-dev-server

npm isntall webpack-dev-server -save-dev

修改 webpack.config.js

    devServer: {
        contentBase: './dist'
    },

修改package.json文件

   "server": "webpack-dev-server --open"

执行命令

npm run server

浏览器访问

http://localhost:8080/

———- 整理配置文件如下 —————

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --watch --progress",
    "server": "webpack-dev-server --hotOnly",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "clean-webpack-plugin": "^0.1.19",
    "core-decorators": "^0.20.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  },
  "babel": {
    "presets": [
      "env"
    ],
    "plugins": []
  }
}

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    devServer: {
        contentBase: './dist'
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

.babelrc

{
  "plugins": ["transform-decorators-legacy"]
}