{"action":"closed","issue":{"url":"https://api.github.com/repos/liferay/alloy-editor/issues/315","labels_url":"https://api.github.com/repos/liferay/alloy-editor/issues/315/labels{/name}","comments_url":"https://api.github.com/repos/liferay/alloy-editor/issues/315/comments","events_url":"https://api.github.com/repos/liferay/alloy-editor/issues/315/events","html_url":"https://github.com/liferay/alloy-editor/issues/315","id":98384816,"number":315,"title":"Alloyeditor and global namespace","user":{"login":"kkotwal94","id":8924340,"avatar_url":"https://avatars.githubusercontent.com/u/8924340?v=3","gravatar_id":"","url":"https://api.github.com/users/kkotwal94","html_url":"https://github.com/kkotwal94","followers_url":"https://api.github.com/users/kkotwal94/followers","following_url":"https://api.github.com/users/kkotwal94/following{/other_user}","gists_url":"https://api.github.com/users/kkotwal94/gists{/gist_id}","starred_url":"https://api.github.com/users/kkotwal94/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kkotwal94/subscriptions","organizations_url":"https://api.github.com/users/kkotwal94/orgs","repos_url":"https://api.github.com/users/kkotwal94/repos","events_url":"https://api.github.com/users/kkotwal94/events{/privacy}","received_events_url":"https://api.github.com/users/kkotwal94/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-07-31T12:52:30Z","updated_at":"2015-08-21T07:47:21Z","closed_at":"2015-08-21T07:47:21Z","body":"So I gave it a shot with 4.0 and still couldn't get it to be used globally in my project. For a bundler I use Webpack. \r\n\r\nHere is example of my directory (alloy-editor is in nodemodules)\r\nhttps://github.com/kkotwal94/IsoReportProcessor\r\n\r\nI simply wrote require(\"alloyeditor\") since that is the alias that I chose for it. Here is the code for the webpack config file, look in the resolve.alias portion of it. I set the path and gave it the name alloyeditor. \r\n\r\nWe tried this based off the documentation here : http://webpack.github.io/docs/configuration.html#resolve\r\n\r\nAlso when I installed it via npm it was still version 3.7 (same with bower i think) so I git cloned the repository and just used what was in this repository.\r\n```\r\nvar path = require(\"path\");\r\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\");\r\nvar webpack = require(\"webpack\");\r\n\r\nvar assetsPath = path.join(__dirname, \"public\", \"assets\");\r\nvar publicPath = \"assets/\";\r\n\r\nvar commonLoaders = [\r\n  {\r\n    /*\r\n     * TC39 categorises proposals for babel in 4 stages\r\n     * Read more http://babeljs.io/docs/usage/experimental/\r\n     */\r\n    test: /\\.jsx$/, loader: \"babel-loader?stage=0\"\r\n  },\r\n  {\r\n    test: /\\.js$/,\r\n    loader: \"babel-loader?stage=0\",\r\n    include: path.join(__dirname, \"app\")\r\n  },\r\n  { test: /\\.png$/, loader: \"url-loader\" },\r\n  { test: /\\.jpg$/, loader: \"file-loader\" },\r\n  { test: /\\.html$/, loader: \"html-loader\" }\r\n];\r\n\r\nmodule.exports = [\r\n  {\r\n    // The configuration for the client\r\n    name: \"browser\",\r\n    /* The entry point of the bundle\r\n     * Entry points for multi page app could be more complex\r\n     * A good example of entry points would be:\r\n     * entry: {\r\n     *   pageA: \"./pageA\",\r\n     *   pageB: \"./pageB\",\r\n     *   pageC: \"./pageC\",\r\n     *   adminPageA: \"./adminPageA\",\r\n     *   adminPageB: \"./adminPageB\",\r\n     *   adminPageC: \"./adminPageC\"\r\n     * }\r\n     *\r\n     * We can then proceed to optimize what are the common chunks\r\n     * plugins: [\r\n     *  new CommonsChunkPlugin(\"admin-commons.js\", [\"adminPageA\", \"adminPageB\"]),\r\n     *  new CommonsChunkPlugin(\"common.js\", [\"pageA\", \"pageB\", \"admin-commons.js\"], 2),\r\n     *  new CommonsChunkPlugin(\"c-commons.js\", [\"pageC\", \"adminPageC\"]);\r\n     * ]\r\n     */\r\n    context: path.join(__dirname, \"app\"),\r\n    entry: {\r\n      app: \"./app\"\r\n    },\r\n    output: {\r\n      // The output directory as absolute path\r\n      path: assetsPath,\r\n      // The filename of the entry chunk as relative path inside the output.path directory\r\n      filename: \"[name].js\",\r\n      // The output path from the view of the Javascript\r\n      publicPath: publicPath\r\n\r\n    },\r\n    module: {\r\n      preLoaders: [{\r\n        test: /\\.js$|.jsx$/,\r\n        exclude: /node_modules/,\r\n        loaders: [\"eslint\"]\r\n      }],\r\n      loaders: commonLoaders.concat([\r\n        { test: /\\.css$/, loader: \"style!css\" },\r\n        { test: /\\.scss$/,\r\n          loader: ExtractTextPlugin.extract(\"css?sourceMap!sass?sourceMap&outputStyle=expanded\" +\r\n            \"&includePaths[]=\" + (path.resolve(__dirname, \"./bower_components\")) +\r\n            \"&includePaths[]=\" + (path.resolve(__dirname, \"./node_modules\")) +\r\n            '&includePaths[]=' + (path.resolve(__dirname, './node_modules/alloy-editor/dist/alloy-editor/assets')))\r\n        }\r\n      ])\r\n    },\r\n    resolve: {\r\n      extensions: ['', '.react.js', '.js', '.jsx', '.scss', '.css'],\r\n      modulesDirectories: [\r\n        \"app\", \"node_modules\"\r\n      ],\r\n      alias: {\r\n      alloyeditor : './node_modules/alloy-editor/dist/alloy-editor/alloy-editor-all.js'\r\n      }\r\n    },\r\n    plugins: [\r\n        // extract inline css from modules into separate files\r\n        new ExtractTextPlugin(\"styles/main.css\")\r\n    ]\r\n  }, {\r\n    // The configuration for the server-side rendering\r\n    name: \"server-side rendering\",\r\n    context: path.join(__dirname, \"app\"),\r\n    entry: {\r\n      app: \"./app\",\r\n      header: \"./elements/Header.react\"\r\n    },\r\n    target: \"node\",\r\n    output: {\r\n      // The output directory as absolute path\r\n      path: assetsPath,\r\n      // The filename of the entry chunk as relative path inside the output.path directory\r\n      filename: \"[name].server.js\",\r\n      // The output path from the view of the Javascript\r\n      publicPath: publicPath,\r\n      libraryTarget: \"commonjs2\"\r\n    },\r\n    externals: /^[a-z\\-0-9]+$/,\r\n    module: {\r\n      loaders: commonLoaders\r\n    },\r\n    resolve: {\r\n      extensions: ['', '.react.js', '.js', '.jsx', '.scss'],\r\n      modulesDirectories: [\r\n        \"app\", \"node_modules\"\r\n      ]\r\n    },\r\n    plugins: [\r\n      new webpack.NormalModuleReplacementPlugin(/\\.(css|scss)$/, \"node-noop\")\r\n    ]\r\n  }\r\n];\r\n\r\n```"}}